2 Drawers, but 2nd drawer should not allow clicking on the first

[ritvij14]

I have a left drawer which is like the default drawer of the web app, and it stays open on pc screens on the left.

Now on a part of the web app, a 2nd drawer needs to open from the right side. This works fine for me

The problem is, when the right drawer is open, I want the default left drawer to not be focusable by the user, but it is, and even through the right drawer's overlay, I can click on items in the left drawer.

How do I remove this behaviour? Left drawer should not be focusable as long as the right drawer is open.

[saadeghi]

You can control each drawer using the value of their checkboxes. And whenever a drawer is close (checkbox is unchecked) you can add inert HTML attribute to its sidebar content.

Let me know if you have a question.

[ritvij14]

@saadeghi thanks for the quick reply. Actually inert would probably solve my scenario, but according to this its not in stable React yet facebook/react#17157 (comment)

Is there anything else I can use? I understand the checkbox thing, but the left sidebar of the app stays open using md:drawer-open. I want it to become un-focusable if any other drawer opens on the screen.

[saadeghi]

facebook/react#17157 (comment)

[ritvij14]

@saadeghi thanks for the help, I had tried this previously but did not work. I realised I had put the attribute on the div just inside the sidebar. That was my fault.

The correction was to put it on the div with the drawer-side class. It works as intended now. Thanks a lot!