Focus-lock does not work with copy-to-clipboard libraries

[just-boris]

When FocusLock is activated on the page, the underlying elements cannot do copy-to-clipboard operation with an invisible textarea, because focus lock does not allow to select the content there

Live demo: https://codesandbox.io/s/distracted-dubinsky-0tfsrh?file=/src/App.tsx

import copyToClipboard from "copy-text-to-clipboard";
import FocusLock from "react-focus-lock";

<FocusLock>
  <button onClick={() => copyToClipboard("2")}>Click me!</button>
</FocusLock>

P.S. I am aware about navigator.clipboard.writeText API, but not all browsers support it, so here comes this issue

[theKashey]

Interesting task. There are a few ways to solve it, and I could not pick one. Let me just list all opportunities.

• from copy-text-to-clipboard side: add a data-attribute to let focus know to ignore it (via whitelist function or there is data-no-focus-lock prop)
• from copy-text-to-clipboard side: add onBlur handler to move focus back. Focus lock will surrender.
• from your code. Add whilelist prop, which will look at the element, see its out of the screen, and allow focus.
• from your code. Specify target to copy-text-to-clipboard, so it will be or inside focus-lock or inside element marked with data-no-focus-lock

I cannot see a good way to solve this problem from the focus-lock side. It should do what it does.

[just-boris]

Thanks! Suggested workarounds make sense for me, no actions required