[Modal] html overflow hidden issue #18336
Description
- 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 😯
Our app uses Popover and Dialog components. They work correctly with v4.5.0. With 4.5.2 and 4.6.1 the exhibit strange behavior.
Popover: When opening, scrolls page to the top. When closing, scrolls down, but not quite to original position
Dialog: When opening, the page scroll is not removed, scrolls to top. When closing, page stays scrolled to top.
This uses the Popover for a custom dropdown.
Before opening, note how page is scrolled down:
Now opened, page is scrolled up, Popover attached to bottom of the screen:
Dialog not removing scroll when opened, and scrolled to top:
Expected Behavior 🤔
- Popover/Dialog should remove the scroll when opened, maintain the scroll position, and reset it when closed.
This is what we have in prod right now with 4.5.0
Before opening, page is scrolled down:
When opened, page scroll is removed, Popover attached to the opening element:
As dialog is opened, scrollbar is removed from the page, scroll position stays:
Steps to Reproduce 🕹
I don't see this happening with the examples, so I'm not sure yet how to repro this outside our codebase.
Context 🔦
I want to update to the latest version of material-ui. This is blocking us.
Your Environment 🌎
| Tech | Version |
|---|---|
| Material-UI | v4.5.2 v4.6.1 |
| React | 16.11.0 |
| Browser | Chrome 78 |
| TypeScript | N/A |
| etc. |