From 25538c528de5b4037f07e51896fee801be9e54f5 Mon Sep 17 00:00:00 2001
From: Joao Silva <100691367+JoaoSilvaGrafana@users.noreply.github.com>
Date: Fri, 19 Aug 2022 09:57:56 +0100
Subject: [PATCH] Grafana-UI: Changes ClipboardButton to always allow copy of
 multi line content (#53903)

---
 .../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();
   }
 };