Grafana-UI: Changes ClipboardButton to always allow copy of multi line content (#53903)

packages/grafana-ui/src/components/ClipboardButton/ClipboardButton.tsx

@@ -93,16 +93,17 @@ const copyText = async (text: string, buttonRef: React.MutableRefObject<HTMLButt
   } else {
     // Use a fallback method for browsers/contexts that don't support the Clipboard API.
     // See https://web.dev/async-clipboard/#feature-detection.
-    const input = document.createElement('input');
+    // Use textarea so the user can copy multi-line content.
+    const textarea = document.createElement('textarea');
     // Normally we'd append this to the body. However if we're inside a focus manager
     // from react-aria, we can't focus anything outside of the managed area.
     // Instead, let's append it to the button. Then we're guaranteed to be able to focus + copy.
-    buttonRef.current?.appendChild(input);
-    input.value = text;
-    input.focus();
-    input.select();
+    buttonRef.current?.appendChild(textarea);
+    textarea.value = text;
+    textarea.focus();
+    textarea.select();
     document.execCommand('copy');
-    input.remove();
+    textarea.remove();
   }
 };