Material-ui: tabIndex on Paper while Drawer is open causes TextField to become unselectable

[jonasgroendahl]

The problem occurs when a Drawer is open and you attempt to select a TextField. Everything else is targettable but the TextInput is not.
I hosted the site to showcase the error: https://5d23460e2da74110456145be--objective-mestorf-6b1e2a.netlify.com/

I was fiddling around with the example and it seems like the tabIndex on the nested Paper inside the Drawer is causing the problem. If I delete the attribute using the dev tools, it works. This is very odd.

@material-ui/[email protected]

I'm using Create-React-App

Codesandbox: https://codesandbox.io/embed/create-react-app-vf67q

[oliviertassinari]

@jonasgroendahl Please provide a minimal test case (with the sources). This would help a lot 👷 .
A live example would be perfect. This codesandbox.io template _may_ be a good starting point. Thank you!

[jonasgroendahl]

@oliviertassinari Codesandbox added with a minimal test case. Removing the tabIndex solves the problem, maybe this is intended behaviour, if so, I'm curious to know how it works ^^

Codesandbox: https://codesandbox.io/embed/create-react-app-vf67q

[eps1lon]

The root will also be aria-hidden. Might be an issue with disablePortal

[oliviertassinari]

@jonasgroendahl Thanks for the reproduction, I'm not sure. Why are you using a temporary drawer? Did you try the other variants (that don't use a Modal?)

[oliviertassinari]

The root will also be aria-hidden. Might be an issue with disablePortal

@eps1lon Outch!

[jonasgroendahl]

@jonasgroendahl Thanks for the reproduction, I'm not sure. Why are you using a temporary drawer? Did you try the other variants (that don't use a Modal?)

The idea is that the user should make a selection within the drawer but at the same also have access to the input field within another specific element while everyone thing else is unselectable and ideally behind the backdrop. If you click the link to the live site, it might make more sense for my use case. Or would you use a different approach here? Persistent drawer? (that means you would be able to interact with the body of the page however)

[oliviertassinari]

The root will also be aria-hidden. Might be an issue with disablePortal

Actually, I was facing the same issue with the server-side modal demo: https://material-ui.com/components/modal/#server-side-modal. The solution was to change the container to the parent of the modal. I think that we could apply the same logic here.

[markmcdowell]

I had the exact same issue, disableEnforceFocus was the property I needed to set.