IntenseWebs/grafana
3
0
Fork 0
mirror of https://github.com/grafana/grafana.git synced 2024-11-28 03:34:15 -06:00
Code Issues Packages Projects Releases Wiki Activity

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

Browse Source
This commit is contained in:
Joao Silva 2022-08-19 09:57:56 +01:00 committed by GitHub
parent 6b1804b6c0
commit 25538c528d
No known key found for this signature in database
GPG Key ID: 4AEE18F83AFDEB23
1 changed files with 7 additions and 6 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

13
packages/grafana-ui/src/components/ClipboardButton/ClipboardButton.tsx
View File

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