[Select][material-ui] Don't lock the body scroll and make it non-modal select

Current Behavior 😯

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

I don't have a demo to reproduce sorry, but I suppose this is a known issue: #8710, #7239, so maybe someone can help.

The select component is located on an app bar on the screenshot.

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

Expected Behavior 🤔

The scrollbar should not disappear.

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 to solve the problem, the position won't be correct. I would also expect the backdrop to be removed, and the aria inert not to be applied.