material-ui input select attribute hides the body overflow-y scroll - react js

user_7075102 0
Viewed 8462

I am using material-ui v3.1.2 with react js v16.5.2. In my page, there are many places where i am using <TextField> with select attribute. So, whenever i click on that TextField and when the dropdown appears, it hides my parent vertical scrollbar causing some ui shifting towards right as it hides the scrollbar. I don't want that to happen, so any solution would be of great help.

Here is the screenshot of before opening the dropdown,

Screenshot_before_dropdown

Here is the screenshot of after opening the dropdown,
Screenshot_after_dropdown

material-ui reactjs css html javascript
2 Answers

A workaround for this issue can be to use the Select component of material-ui and use the 'disableScrollLock: true' property. But in that case, the scroll bar will not disappear on opening select, so the whole page will be scrollable while the select options are open.

<Select
    MenuProps={{
          disableScrollLock: true,
        }}
...
/>
user_73134250

I have a problem using Select component, so The solution using a textField:

 <TextField select SelectProps={{ MenuProps: { disableScrollLock: true } }}/>
user_119039390
Related