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

[natezhengbne]

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

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

[sag1v]

@oliviertassinari What about version 4.11.0?

[natezhengbne]

@oliviertassinari What about version 4.11.0?

I tried here but still not work on version 4.11.0

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

[oliviertassinari]

We have no plan to backport fixes from v5 to v4.

[sag1v]

@natezhengbne the problem is the drawer not the text field itself.

@oliviertassinari Anyway to workaround this issue? as migrating from v4 to v5 is painful.
We actually have some more issues with shadow-dom, like making all popover components (modals tooltips etc) to be contained by default.

[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

[natezhengbne]

@sag1v it works, big thanks
We also have tricky issues with the shadow-dom, same as you have.
Meanwhile, I also use version 4. It is more stable.

[natezhengbne]

Hi @oliviertassinari , could you have a look at this issue?
The popper also couldn't be included in shadow-root.
Sandbox: https://codesandbox.io/s/material-demo-forked-nwh3s?file=/theme-provider.tsx:791-806
Local snaphot:

[oliviertassinari]

See #17473 for the support of shadow DOM

[natezhengbne]

@sag1v
If the mount point can be pass thought the popover components to the inner popper,
the popper component will be contained by the shadow-DOM.

[petermikitsh]

If you're using Shadow DOM, and have a TextField inside of a Menu, in v4 you can set the disableEnforceFocus prop:

<Menu disableEnforceFocus>
  <TextField />
</Menu>

[hata6502]

If you're using Shadow DOM, and have a TextField inside of a Menu, in v4 you can set the disableEnforceFocus prop:

Thank you!