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.

[davidtheclark]

@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.

[theKashey]

@chandlerprall - try react-focus-lock, it’s a bit more portals friendly, as long it uses React event system and focus events “bubbles” thought portals without issues.

Meanwhile, you may use react-dom-reflection to discover all portals within the parent node.