From 49c1c2ec0a5e9a245f5958fca089f0f479926fbf Mon Sep 17 00:00:00 2001
From: "Grot (@grafanabot)" <43478413+grafanabot@users.noreply.github.com>
Date: Mon, 22 Aug 2022 12:50:26 +0200
Subject: [PATCH] Grafana-UI: Changes ClipboardButton to always allow copy of
 multi line content (#53903) (#53929)

---
 .../components/ClipboardButton/ClipboardButton.tsx  | 13 +++++++------
 1 file changed, 7 insertions(+), 6 deletions(-)

diff --git a/packages/grafana-ui/src/components/ClipboardButton/ClipboardButton.tsx b/packages/grafana-ui/src/components/ClipboardButton/ClipboardButton.tsx
index 5e021d9e330..7c6c3e72b52 100644
--- a/packages/grafana-ui/src/components/ClipboardButton/ClipboardButton.tsx
+++ b/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();
   }
 };