Skip to content

fix: improve clipboard support on HTTP connections and older browsers #12178

New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Merged
merged 2 commits into from
Feb 15, 2024
Merged

fix: improve clipboard support on HTTP connections and older browsers #12178

Changes from all commits
Commits
Show all changes
2 commits
Select commit Hold shift + click to select a range
b1917bc
fix: add future-proofing for clipboard copies on http connections
Parkreiner Feb 15, 2024
a041dbd
docs: clean up comment formatting
Parkreiner Feb 15, 2024
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
26 changes: 22 additions & 4 deletions site/src/hooks/useClipboard.ts
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -22,7 +22,7 @@ export const useClipboard = (textToCopy: string): UseClipboardResult => {
setIsCopied(false);
}, 1000);
} catch (err) {
const isCopied = simulateClipboardWrite();
const isCopied = simulateClipboardWrite(textToCopy);
if (isCopied) {
setIsCopied(true);
timeoutIdRef.current = window.setTimeout(() => {
Expand All @@ -44,12 +44,16 @@ export const useClipboard = (textToCopy: string): UseClipboardResult => {
};

/**
* Provides a fallback clipboard method for when browsers do not have access
* to the clipboard API (the browser is older, or the deployment is only running
* on HTTP, when the clipboard API is only available in secure contexts).
*
* It feels silly that you have to make a whole dummy input just to simulate a
* clipboard, but that's really the recommended approach for older browsers.
*
* @see {@link https://web.dev/patterns/clipboard/copy-text?hl=en}
*/
function simulateClipboardWrite(): boolean {
function simulateClipboardWrite(textToCopy: string): boolean {
const previousFocusTarget = document.activeElement;
const dummyInput = document.createElement("input");

Expand All @@ -70,12 +74,26 @@ function simulateClipboardWrite(): boolean {
style.border = "0";

document.body.appendChild(dummyInput);
dummyInput.value = textToCopy;
dummyInput.focus();
dummyInput.select();

const isCopied = document.execCommand("copy");
dummyInput.remove();
/**
* The document.execCommand method is officially deprecated. Browsers are free
* to remove the method entirely or choose to turn it into a no-op function
* that always returns false. You cannot make any assumptions about how its
* core functionality will be removed.
*
* @see {@link https://developer.mozilla.org/en-US/docs/Web/API/Clipboard}
*/
let isCopied: boolean;
try {
isCopied = document?.execCommand("copy") ?? false;
} catch {
isCopied = false;
}

dummyInput.remove();
if (previousFocusTarget instanceof HTMLElement) {
previousFocusTarget.focus();
}
Expand Down