react-focus-lock
react-focus-lock copied to clipboard
Support for multiple windows, each maintaining a FocusLock
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