Open loizosv opened 2 months ago
It would work if you use the Popper
component, e.g. https://codesandbox.io/p/sandbox/popover-issue-forked-7fxkvy?file=%2Fsrc%2FMyPopover.jsx%3A10%2C24. Is there a specific reason for using Popover
vs Popper
? Check the docs page for more details: https://mui.com/material-ui/react-popper/
One 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 1 Demo
Popover 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 Solution 2 Demo
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?
Yeah, agreed! I think we have some improvement opportunities as far as documentation for both of these components:
disableScrollLock
)I also wonder if there's room to change how the disableScrollLock
affects the Popover positioning or if we need another prop for that altogether. Like, if the prop is on, I can understand the expectation of the popover getting out of the viewport as you scroll past the trigger (it seems like this is Radix's default behavior, and we can change that with their hideWhenDetached
prop, if I'm getting it right). But I can also understand the opposite (current behavior). In any case, the moving to the left corner behavior does seem like a bug and these are definitely things we'll need to address on Base UI 👍
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. popper doesn't handle click away events while popper has popover prevents page scroll while popper does. ...
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
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 disableScrollLock
of Popover isn’t working as expected as the default value is false.
See Live example to reproduce
Link to live example: CodeSandBox Demo
https://github.com/mui/material-ui/assets/151521147/b46464bd-dc9b-474d-8f34-b66b162d911f
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 wantI 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