Material-ui: [Select] Don't lock the body scroll

[giorgi-m]

• [ ] 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 😯

When I open a Select component vertical scroll bar of page dissapears.
See here

I don't have demo to reproduce sorry, but I suppose this is known issue: https://github.com/mui-org/material-ui/issues/8710, https://github.com/mui-org/material-ui/pull/7239, so maybe someone can help.

The select component is located on an app bar on the screen shot.

I tried setting box-sizing: border-box on App bar, no help.

Expected Behavior 🤔

Scrollbar should not dissapear.

Your Environment 🌎

| Tech | Version |
| ----------- | ------- |
| Material-UI | v3.1.1 |
| React | 16.5 |
| Browser | Chrome |

[sjsakib]

Any update on this issue? I have a select element inside a hero/landing page. When the select menu opens, scroll gets locked. And that causes body to shrink by about .2px. And that causes the background image to jump a bit. I find this very annoying. Anyone have any suggestions to work around this?

[sjsakib]

I've found out that material ui is apply a padding-right of 17px to handle the hidden scrollbar. But the problem is that the scrollbar is actually 17.2px. I've tested on chrome, firefox, and opera

[jeronimomora]

@sjsakib

Quote from eplumecocq for a Select fix

<Select MenuProps={{ disableScrollLock: true }} />

Which means that if you have this problem for a menu, just add disableScrollLock={true} as a prop to Menu

[oliviertassinari]

@jeronimomora Unfortunately, this isn't enough for solving the problem. The position won't be correct.

[WholemealDrop]

Following, also experiencing this with Select component.

| Material-UI | v3.9.2 |
| React | v16.9.0 |
| Browser | chrome |

[tactycHQ]

@sjsakib

Quote from eplumecocq for a Select fix

<Select MenuProps={{ disableScrollLock: true }} />

Which means that if you have this problem for a menu, just add disableScrollLock={true} as a prop to Menu

While this seems to works for the Select component, React throws the following warning. I suspect this is because there is no child Menu compnent under Select. Select only has the Menuiitem components as children.

"Warning: React does not recognize thedisableScrollLockprop on a DOM element. If you intentionally want it to appear in the DOM as a custom attribute, spell it as lowercasedisablescrolllockinstead. If you accidentally passed it from a parent component, remove it from the DOM element."

[TomPradat]

Any updates ? I also have the problem with version 4.8.2 when displaying drawers, menus. The disableScrollLock works for me on the Menus but this is not a satisfying solution IMO.

[BrentGrammer]

I'm having a scroll bar issue with the Select component as well - the scroll bar appears when hovering over it and disappears on mouse leave. It causes a janky visual effect. Setting overflow-y to hidden on all sorts of elements doesn't fix it. Anyone else run into this and solve it?

[TomPradat]

Personnaly i've locked the version on 4.6.x, you can try the disableScrollLock prop trick else

[Dito-Orkodashvili]

In my case this problem is caused by Tooltip component. It is a bit strange issue.

if I use it like this:
const ActionButton = ({ tooltip }) => ( <Tooltip title={tooltip} > <Button /> </Tooltip> )

it adds padding-right to the body (17px), but if I remove Tooltip from inside the ActionButton component and wrap it from outside like this:
<Tooltip title={tooltip}> <ActionButton /> </Tooltip>
it works fine

[defkev]

Seeing the same behavior as @Dito-Orkodashvili with a <Button> wrapped by a <Tooltip> toggling a <Menu>

If the box model is close to showing the vertical scrollbar, opening the menu will add the padding-right:17px scrollbar to the body though there is no scrollbar moving the body 17px to the left.

As a workaround set the tooltip's title to nothing when the <Menu> is opened:

<Tooltip title={this.state.menuAnchor ? '' : 'The Tooltip'}>

@material-ui/core 4.9.5

[thenderson55]

This is still an issue with @material-ui/core 4.11.0. When I open a nav menu or popover it adds:
padding-right: 10px

disableScrollLock={true} fixes it but is a terrible solution since people can then scroll which seems very unnatural

[benpryke]

I added box-sizing: border-box to body so that at least the added padding-right no longer causes the page content to stretch when the scrollbar is hidden, though there is now an empty space down the side of the page when the menu is open. Most users probably won't notice, but some will.

[TomPradat]

Just in case this helps, in my team we've fixed this by adding the following css :

html {
    overflow: hidden;
}

See https://github.com/mui-org/material-ui/issues/19984