Overflow hidden to the body with two Drawer components

danylboiko95 commented 3 years ago

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

Current Behavior 😯

I create two

... ...

And in this case when I switched routing it set overflow: hidden and I can't scroll the page, but if an again switch URL it is ok, every second time it changes overflow on body

Expected Behavior 🤔

I should scroll the body

Steps to Reproduce 🕹

Create two drawers and try to switch URL using react-router-dom

Steps:

Create this

const useStyles = makeStyles(
    theme => ({
        root: {
            display: "flex",
            [theme.breakpoints.down("md")]: {
                display: "block"
            }
        },
        drawerDesktop: {
            width: drawerWidth,
            flexShrink: 0,
            [theme.breakpoints.down("md")]: {
                display: "none"
            }
        },
        drawerMobile: {
            width: drawerWidth,
            flexShrink: 0,
            display: "none",
            [theme.breakpoints.down("md")]: {
                display: "block"
            }
        },
        drawerPaper: {
            width: drawerWidth
        },
        main: {
            flexGrow: 1,
            padding: 0
        }
    }),
    { index: 1 }
);

                <Drawer
                    className={classes.drawerDesktop}
                    variant="permanent"
                    classes={{ paper: classes.drawerPaper }}
                    anchor="left"
                    open={true}
                    onClose={toggleDrawer}
                >

                </Drawer>

                <Drawer
                    className={classes.drawerMobile}
                    variant="temporary"
                    classes={{ paper: classes.drawerPaper }}
                    anchor="left"
                    open={isDrawerOpened}
                    onClose={toggleDrawer}
                >

Switch URL using react router dom
Now overflow: hidden should be add to the body

Context 🔦

Your Environment 🌎

`npx @material-ui/envinfo`

``` System: OS: macOS 11.0.1 Binaries: Node: 12.18.1 - ~/Documents/privateDir/node/12.18.1_64bit/bin/node Yarn: Not Found npm: 6.14.5 - ~/Documents/privateDir/node/12.18.1_64bit/bin/npm Browsers: Chrome: 88.0.4324.150 Edge: Not Found Firefox: Not Found Safari: 14.0.1 npmPackages: @material-ui/core: ^4.11.0 => 4.11.2 @material-ui/icons: ^4.9.1 => 4.11.2 @material-ui/lab: ^4.0.0-alpha.56 => 4.0.0-alpha.57 @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: ^16.9.43 => 16.14.2 react: ^16.13.1 => 16.14.0 react-dom: ^16.13.1 => 16.14.0 typescript: ^3.9.7 => 3.9.7 ```

oliviertassinari commented 3 years ago

Please provide a minimal reproduction test case. This would help a lot 👷 . A live example would be perfect. This codesandbox.io template may be a good starting point. Thank you!

fgira commented 2 years ago

Hello @danylboiko95 ,

The property "overflow : hidden" is added on the <body> when a Drawer variant "temporary" is open (=true). Even if the Drawer is display "none".

Be carefull about your property isDrawerOpened on the second Drawer.

maupeon commented 2 years ago

Same problem here, I am really sure my second open property is false @fgira

eliasnemr commented 2 years ago

Same here - any fixes in place?

Kyderman commented 2 years ago

You can use useMediaQuery to check for the correct screen size and apply that match to part of the decision on whether to have your temporary drawer acting as open. it will fix the issue

mui / material-ui