-
-
Notifications
You must be signed in to change notification settings - Fork 31.8k
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.
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
[material-ui][Popover] The disableScrollLock
prop is causing issues with CSS and additional scrolling functionality
#42320
Comments
It would work if you use the |
SOLUTION 1: Add Transition Duration on the PopoverOne solution is to add transitionDuration={0} on the Popover so the animation duration is 0 which is preventing the popover from moving to the bottom corner. SOLUTION 2: Replace Popover with PopperPopover also works and does not require the transitionDuration. However it requires additional code to implement onClickAway listener, and implement additional CSS to make it look better |
Considering the number of issues you linked, it seems like this is common problem for people. It could be valuable to add a demo to teach people what are the options when facing these kinds of issues. cc @samuelsycamore @danilo-leal what do you think? |
disableScrollLock
prop is causing issues with CSS and additional scrolling functionality
Yeah, agreed! I think we have some improvement opportunities as far as documentation for both of these components:
I also wonder if there's room to change how the |
Hi thanks @mnajdova and @danilo-leal for recognizing this issue. In my hamble opinion i think is unnecessary to have these components separate. They are both kind of popup windows which allow you to display information, of which their behavior changes based on the props passed to them. The difference i can find is based mainly on aesthetics. Eg, popper is simple with no animation and popover is animated and more interactive. So there is a kind of true-false relationship of these functionalities on which you can address by adding more props to their APIs, or in my opinion one final component/API |
It's very likely that we will consolidate the API in the future, especially after we migrate to Floating UI (Base UI has already done it, so once we depend on it, this change will happen). |
It’s weird that the |
See Live example to reproduce
Link to live example: CodeSandBox Demo
ReactApp-GoogleChrome2024-05-2119-25-59-ezgif.com-crop-video.mp4
Current behavior
When the Popover is open without the
disableScrollLock
prop, is not allowing me to scroll through the page. In addition is addingpadding-right
andoverflow:hidden
to the body tag.To prevent additional CSS from being apply to the body tag, I used
disableScrollLock
and also allows me to scroll on the page.However this solution creates a second issue: **When the popover is active and the user still scrolls at a point where the button is not visible anymore, the popup remains open which i don't want **
I tried adding a useEffect hook to detect when the user scrolls more that 50 px and force the popover to close. Although it works it creates a 3rd issue where the popover is translated (moved) to the bottom left corner of the page for less than a second and then disappears.
Expected behavior
The required functionality is as follows:
Context
I checked all ANCIENT previous questions but cannot find solution. Most questions below are more than 6-7 years old. There should be a solution by now. Don't say is duplicate if the duplicate question doesn't even have a reply with a valid structured answer.
Your environment
No response
Search keywords: popover, scroll, disableScrollLock
The text was updated successfully, but these errors were encountered: