[TrapFocus] Steals focus from nested portal

• This is not a v0.x issue.
• I have searched the issues of this repository and believe that this is not a duplicate.

Expected Behavior 🤔

TrapFocus ensures focus is kept on elements within its React element spanning tree.

Current Behavior 😯

Since TrapFocus keeps the focus on elements within its DOM hierarchy, focusable elements within its React hierarchy but outside its DOM hierarchy (e.g. inside of a Popper or a portal) can’t be focused.

Steps to Reproduce 🕹

Example: https://codesandbox.io/s/llv0m7r5jq

Click on the [Open Dialog] button, then on the [Open Popper] button. In the console, you’ll see that the TextField within the Popper is focused (as it should since it’s autoFocus), then instantly blurred back by the TrapFocus.

Context 🔦

I’m building an autocomplete component with a “popout” behaviour similar to the one demonstrated at the bottom of react-select’s Advanced doc.

The autocomplete button itself is rendered within a dialog, and I’m using a popper to display the text input and options. Right now I’m disabling the portal behaviour so it’s kept inside the modal’s DOM hierarchy, but this causes issues with the select’s option list overflowing from the modal. My final solution seems very hacky and prone to unexpected failure, so I’d love this to be handled by MUI itself.

Your Environment 🌎

For the stack, see codesandbox.

Tech	Version
Browser	Chrome 74.0.3729.131

Duplicates

• https://github.com/mui-org/material-ui-pickers/issues/1777
• https://github.com/mui-org/material-ui/issues/20915

[oliviertassinari]

@verbart Thanks, it looks like the same problem than the author of this issue has. disabledPortal allows to partially work around the problem, as well as disableEnforceFocus.

Do we have a better solution than to wait for the release of the <FocusScope> component?

elements nested in portals will traverse as expected via the React fiber tree rather than the DOM tree.

https://github.com/facebook/react/pull/15487

[eps1lon]

@emirotin That sounds like #17497