[TrapFocus] Can't focus input attached under shadow-DOM

Whenever I click on a TextField to start editing it, thus the focus will be lost immediately.

• The issue is present in the latest release.
• I have searched the issues of this repository and believe that this is not a duplicate.

Current Behavior 😯

Expected Behavior 🤔

On clicking, the Textfield can get focus normally.

Steps to Reproduce 🕹

Example: https://codesandbox.io/s/material-demo-forked-bi51w?file=/index.tsx

Steps:

1. Click the TextField at the bottom

Context 🔦

class RTWebComponent extends HTMLElement {
  connectedCallback() {
    const shadowRoot = this.attachShadow({ mode: "open" });
    const mountPoint = document.createElement("div");
    mountPoint.id = "ResourceTimeline";
    const reactRoot = shadowRoot.appendChild(mountPoint);

    const jss = create({
      ...jssPreset(),
      insertionPoint: reactRoot
    });

    ReactDOM.render(
      <div>
        <StylesProvider jss={jss}>
          <TemporaryDrawerLoseFocus />
        </StylesProvider>
        {/* <TemporaryDrawerWithoutStlyle /> */}
      </div>,
      mountPoint
    );
  }
}

customElements.define("resource-timeline", RTWebComponent);

export default class TemporaryDrawer extends React.Component {
  render() {
    return (
      <div>
        {/* <ThemeProvider theme={this.getTheme()}> */}
        <Drawer anchor={"top"} open={true}>
          <TextField
            id="111111"
            label="Flight Number"
            variant="outlined"
            margin="dense"
            fullWidth
            defaultValue={"1231"}
          />
        </Drawer>
        {/* </ThemeProvider> */}
      </div>
    );
  }
}

Your Environment 🌎

`npx @material-ui/envinfo`

  System:
    OS: Windows 10 10.0.19041
  Binaries:
    Node: 12.18.3 - C:\Program Files\nodejs\node.EXE
    Yarn: 1.22.5 - C:\opt\Yarn\bin\yarn.CMD
    npm: 6.14.6 - C:\Program Files\nodejs\npm.CMD
  Browsers:
    Chrome: 87.0.4280.88
    Edge: Spartan (44.19041.423.0), Chromium (87.0.664.60)
  npmPackages:
    @material-ui/core: 4.11.2 => 4.11.2
    @material-ui/icons: 4.11.2 => 4.11.2
    @material-ui/styles:  4.11.2
    @material-ui/system:  4.11.2
    @material-ui/types:  5.1.0
    @material-ui/utils:  4.11.2
    @types/react: 17.0.0 => 17.0.0
    react: 17.0.1 => 17.0.1
    react-dom: 17.0.1 => 17.0.1
    typescript: 4.1.3 => 4.1.3

[sag1v]

@natezhengbne When passing the Drawer the modal prop ModalProps={{disableEnforceFocus: true}} it seems to work.

You can do that globally via the theme as well

[oliviertassinari]

We have fixed this issue along the way in v5. I believe we fixed it when we changed the logic of the TrapFocus to only restore the focus when escaping and landing on the body. Proof: https://codesandbox.io/s/material-demo-forked-6ln7y?file=/TemporaryDrawerLoseFocus.tsx.