Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Jump to bottom

[Select] Add an option to not lock the body scrollbar #9595

Closed
1 task done
vyrak opened this issue Dec 21, 2017 · 10 comments
Closed
1 task done

[Select] Add an option to not lock the body scrollbar #9595

vyrak opened this issue Dec 21, 2017 · 10 comments
Labels
component: select This is the name of the generic UI component, not the React module! new feature New feature or request priority: important This change can make a difference

Comments

@vyrak
Copy link

vyrak commented Dec 21, 2017 •
edited
Loading

  • 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)

  1. Have content within <body> tag that causes it to overflow or <body> has style of overflow: visible
  2. 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
@oliviertassinari oliviertassinari added bug 🐛 Something doesn't work component: select This is the name of the generic UI component, not the React module! labels Dec 22, 2017
@alunyov
Copy link

alunyov commented Dec 24, 2017

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

@oliviertassinari oliviertassinari added this to the v1.0.0-prerelease milestone Jan 16, 2018
@oliviertassinari oliviertassinari modified the milestones: v1.0.0-prerelease, post v1 Feb 11, 2018
@oliviertassinari oliviertassinari added new feature New feature or request and removed bug 🐛 Something doesn't work labels Feb 28, 2018
@oliviertassinari oliviertassinari removed this from the post v1.0.0 milestone Jul 17, 2018
@oliviertassinari oliviertassinari changed the title [Select] Error on click away when there are no menu items [Select] Add an option to not lock the body scrollbar Mar 13, 2019
@oliviertassinari oliviertassinari added the priority: important This change can make a difference label Mar 13, 2019
@oliviertassinari
Copy link
Member

I'm closing for #13922.

@thakuranujsingh
Copy link

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

@brianperera
Copy link

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

@Eplumecocq
Copy link

Eplumecocq commented Nov 13, 2019 •
edited by oliviertassinari
Loading

@brianperera You should use the MenuProps props like so :

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

@dkartacs
Copy link

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....

@oliviertassinari
Copy link
Member

Sorry, we don't support older versions.

@felipe-b-oliveira
Copy link

@brianperera You should use the MenuProps props like so :

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

It didn't work for me

@peterlu-hinter
Copy link

peterlu-hinter commented Nov 12, 2020 •
edited
Loading

@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

@oliviertassinari
Copy link
Member

@peterlu-hinter This depends on your perspective, a native select on macOS behaves like a modal. We have moved the discussion to #17353.

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

This is fixed in v5: https://next.material-ui-pickers.dev/demo/datepicker

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Assignees
No one assigned
Labels
component: select This is the name of the generic UI component, not the React module! new feature New feature or request priority: important This change can make a difference
Projects
None yet
Milestone
No milestone
Development

No branches or pull requests
9 participants
@alunyov @vyrak @peterlu-hinter @dkartacs @oliviertassinari @brianperera @Eplumecocq @thakuranujsingh @felipe-b-oliveira