diff --git a/src/common/util/copy-clipboard.ts b/src/common/util/copy-clipboard.ts index c50ad02418..e6017e3871 100644 --- a/src/common/util/copy-clipboard.ts +++ b/src/common/util/copy-clipboard.ts @@ -1,3 +1,24 @@ +import { deepActiveElement } from "../dom/deep-active-element"; + +const getClipboardFallbackRoot = (): HTMLElement => { + const activeElement = deepActiveElement(); + if (activeElement instanceof HTMLElement) { + let root: Node = activeElement.getRootNode(); + let host: HTMLElement | null = null; + + while (root instanceof ShadowRoot && root.host instanceof HTMLElement) { + host = root.host; + root = root.host.getRootNode(); + } + + if (host) { + return host; + } + } + + return document.body; +}; + export const copyToClipboard = async (str, rootEl?: HTMLElement) => { if (navigator.clipboard) { try { @@ -8,10 +29,15 @@ export const copyToClipboard = async (str, rootEl?: HTMLElement) => { } } - const root = rootEl ?? document.body; + const root = rootEl || getClipboardFallbackRoot(); const el = document.createElement("textarea"); el.value = str; + el.setAttribute("readonly", ""); + el.style.position = "fixed"; + el.style.top = "0"; + el.style.left = "0"; + el.style.opacity = "0"; root.appendChild(el); el.select(); document.execCommand("copy");