react-focus-lock icon indicating copy to clipboard operation
react-focus-lock copied to clipboard

Support for multiple windows, each maintaining a FocusLock

Open FuXiuHeng opened this issue 4 years ago • 0 comments
trafficstars

Hello! 👋

Main Question

Is it possible to support multiple windows, each with a FocusLock?

Issue

I have two windows: a primary one, and a secondary one (opened via window.open), and each of this window has FocusLock. I use ReactDOM.createPortal to portal elements and the FocusLock into the secondary window. I hope to be able to lock focus in each window separately. However, by having 2 FocusLock, the locking behaviour breaks.

My understanding of the problem

If I understand correctly, the problem is because although the 2 FocusLocks live in separate windows, they are both using the same window object from the primary window for focus management, causing it to break.

CodeSandbox Demo

Here's a CodeSandbox demo that demonstrates the issue: https://codesandbox.io/s/multi-window-react-focus-lock-9ob9m?file=/src/App.tsx

FuXiuHeng avatar Jan 28 '21 06:01 FuXiuHeng