[Drawer] Resizing window with open drawer makes main content non-scrollable

[vonox7]

Duplicates

• [X] I have searched the existing issues

Latest version

• [X] I have tested the latest version

Current behavior 😯

When switching the browser width between mobile & desktop, the main content is not any more scrollable.

Note that this not only happens when the viewport changes between mobile and non-mobile, but also when the Drawer is initialised with open = true state, but the viewport is in "desktop" width.

Expected behavior 🤔

Content is always scrollable, no matter if a Drawer has property open = true or not if Drawer is in "desktop" mode.

Steps to reproduce 🕹

Steps:

1. Go to https://mui.com/material-ui/react-drawer/#responsive-drawer
2. Resize window to "mobile" --> drawer is collapsed behind burger menu
3. Click on burger menu --> drawer appears with gray backdrop, content disappears
4. Reize window to "desktop" --> drawer stays visible on the left, and content re-appears on the right
5. Now try to scroll the content. It doesn't work, as body has overflow: hidden; style. Also note that body has padding-right: 366px; style, which looks not good.

Context 🔦

No response

Your environment 🌎

Latest MUI version on Chrome.

[danilo-leal]

Hey @vonox7, thanks for opening the issue up! I'm not being able to reproduce your report, though:

https://user-images.githubusercontent.com/67129314/162807753-90a6466c-a89f-44ff-a992-02562e81d4b6.mov

[vonox7]

Pls see here:

https://user-images.githubusercontent.com/621501/162834130-f70f191d-1422-4c22-af3b-b77a4ad6beb7.mov

[danilo-leal]

Can you try a hard refresh on the docs to see if it is something related to the version you're looking at?

[vonox7]

Yes, several times. The issue is reproducible on multiple devices on multiple projects. I found now a very hacky workaround, but I assume that the issue should be fixed without this workaround: (The following code is in Kotlin/JS, which gets compiled to JS)

  private fun onResize(event: Event) {
    fixDrawerIssue()
  }

  private fun fixDrawerIssue() {
    if (window.innerWidth >= mbAppContext.theme.breakpoints.values[Breakpoint.md]!!.toInt() && state.mobileNavOpen) {
      console.log("Applying workaround for https://github.com/mui/material-ui/issues/32251")
      setTimeout({ setState { mobileOpen = false } }, 0)
    }
  }

  override fun componentWillMount() {
    window.addEventListener("resize", ::onResize)
  }

  override fun componentWillUnmount() {
    window.removeEventListener("resize", ::onResize)
  }

[vonox7]

Still reproducible on https://mui.com/material-ui/react-drawer/#responsive-drawer with latest MUI version 5.13.1

[HASH-0021]

The issue occurs when the window is resized to desktop widths while the mobile responsive drawer is open. Currently, the only way to close the opened drawer is through onClose property (which is triggered by either escape key or backdrop click). Due to this, the 'mobileOpen' state will not be changed to false and the html tags such as 'body' has style 'overflow:hidden' and any immediate child nodes have 'aria-hidden=true'. I have an issue linked to this issue so I am not opening a new one. My issue (as shown in video) is that the drawer stays open when resized back to mobile width rather than closed state.

Note: It comes back to normal when onClose function is triggered.

https://github.com/mui/material-ui/assets/93818916/0814c1a5-426f-4863-b9a1-056198033b58

Surely the workaround is good, but I think the feature should be inherent.