Material-ui: [Select] Add an option to not lock the body scrollbar

Created on 21 Dec 2017 · 10Comments · Source: mui-org/material-ui

[x] I have searched the issues of this repository and believe that this is not a duplicate.

Expected Behavior

To not hide overflow of body & make things shift when scrollbar disappears.

Current Behavior

Hides overflow of body.

Steps to Reproduce (for bugs)

Have content within <body> tag that causes it to overflow or <body> has style of overflow: visible
Open select drop down

Context

It messes with styling that relies on body having overflow content. Below is a sample of what's happening on the demo site. Notice the scroll bar vanishing as soon as the menu pops up.

mui-select-bug

Your Environment

| Tech | Version |
|--------------|---------|
| Material-UI | v1.0.0-beta.24 |
| React | v16.2.0 |
| browser | 61.0.3163.79 |

Select enhancement important

Source

vyrak

Most helpful comment

@brianperera You should use the MenuProps props like so :

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

Eplumecocq on 13 Nov 2019

👍8

All 10 comments

I'm not sure if this issue is [Select] specific. It looks like it's related to all modals:

This overflow hidden is from modalManager.js:

https://github.com/mui-org/material-ui/blob/16d4947ffa1f509eb074ad59565c9f8650140000/src/Modal/modalManager.js#L84

alunyov on 24 Dec 2017

I'm closing for #13922.

oliviertassinari on 13 Mar 2019

I am facing the same issue in the latest version of Material ui

thakuranujsingh on 22 Aug 2019

👍1

I'm facing the same issue, is there any solution/workaround for this?

brianperera on 10 Sep 2019

@brianperera You should use the MenuProps props like so :

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

Eplumecocq on 13 Nov 2019

👍8

I know probably nobody is going to read this :) (but since this is the issue google pops up all the time), But is there any workaround for earlier versions?
If you are stuck on an earlier version where you cannot disable the scroll lock and if you have fixed headers you are royally screwed

OFF:
Forcing styles (overflow and padding....) straight to the body of the document to handle a simple select is one of the most atrocious piece of "hack" I have ever seen. I know it probably means nothing, but this is the point where I have to write my own select, which means I have one less reason to use this library or to propagate it....

dkartacs on 11 Dec 2019

Sorry, we don't support older versions.

oliviertassinari on 11 Dec 2019

@brianperera You should use the MenuProps props like so :
<Select
   MenuProps={{
     disableScrollLock: true
   }}
/>

It didn't work for me

felipe-b-oliveira on 17 Mar 2020

@oliviertassinari I think this is still an issue. Why select dropdown is hooked with the modal implementation. Select dropdown is not a pop up dialog. Its position should be relative to the select field. The whole modal body overflow:hidden is wrong for select. What if my select dropdown contains 200 items. I cannot even scroll the page with overflow: hidden.
I think it should be done like this:
https://react.mdbootstrap.com/forms/pro/select
It is like the traditional select dropdown. When you open the dropdown, you can still scroll the page up and down. I think many people would agree. The MUI select is using MUI menu for the dropdown. So the problem is on the menu component.

BTW, datepicker has the same issue. I think not everything is a modal :) Dropdown != Modal