[material-ui][Popover] The `disableScrollLock` prop is causing issues with CSS and additional scrolling functionality about material-ui HOT 6 OPEN

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

from material-ui.

SOLUTION 1: Add Transition Duration on the Popover

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

SOLUTION 2: Replace Popover with Popper

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

from material-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

from material-ui.

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/

from material-ui.

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?

from material-ui.

Yeah, agreed! I think we have some improvement opportunities as far as documentation for both of these components:

• We don't seem to address the use case for Popover vs. Popper; what's the difference? When to use one vs. the other?
• There's no demo for the prop in question here (disableScrollLock)
• There's no demo/information about the Popover when in a scroll context (but there's a section/very thorough—and maybe too complex—Scroll demo playground for the Popper instead) which could address the desired behavior here

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 👍

from material-ui.