focus-trap-react: Trap doesn't work if the children are rendered into a React portal
Test case - https://codesandbox.io/s/9y9lmmko84
A stated use case for React’s portals it to avoid overflow issues with things like modals & tooltips. In Elastic UI we use quite a few portals, and have a case where our focused-trapped modal (in a portal) tries to open a focus-trapped context menu (in another portal), but the context menu items won’t receive mouse clicks because the on-outside-click detection doesn’t understand the portal.
FWIW I don’t think this is solvable by focus-trap-react without underlying changes to react-dom, but I wanted to start the conversation here. Since outside click detection is often implemented by asking if the parent DOM element contains the even target, I think ReactDOM should expose a similar contains method that continues through portals, just as event bubbling does.
Any similar change would require focus-trap to allow a configuration parameter to specify a contains function, which could retain the current logic as the default for backwards compatibility.
Please let me know your thoughts on this (if the would-be required changes here and focus-trap make sense, etc), and I’m happy to open the related issue on the React github.
About this issue
- Original URL
- State: closed
- Created 6 years ago
- Comments: 17
@chandlerprall Sorry for the delay — just needed to step back from the open source work for a bit. I reviewed the focus-trap PR and it looks great 👍 Have you tried it with focus-trap-react? I think we may want to verify that it works as expected when mounting & unmounting React components before we merge & release.