[Popover] Don't hide scrollbar

[lcswillems]

• I have searched the issues of this repository and believe that this is not a duplicate.

Summary 💡

In the documentation, it is written: "The scroll and click away are blocked unlike with the Popper component.". But why? Why not allowing to unlock the scrollbar as it is the case for Select, Menu, Dialog, etc...?

You will say me: "use the popper". I can do it, but the popper misses a lot of features that the popover has (escape key & click away).

Moreover, Google alreadys uses Popover that doesn't block the scrollbar:

So it would be nice if there is a way to not block the scrollbar on Popover (this is the only that prevents me to use it everytime I want to use it).

[lcswillems]

After investigation, Google prevents scrolling when subscribe popover is opened without hiding the scrollbar.

I think they do something like:

useEffect(() => {
  const preventScrolling = e => e.preventDefault()

  window.addEventListener('scroll', preventScrolling);
  return () => window.removeEventListener('scroll', preventScrolling);
}, []);

[oliviertassinari]

We have started a discussion around a potential solution to this problem in #17636 (comment)

The Popover behaves like a modal: it changes the active frame to the content of the component. However, we have seen people ask for option to opt-out some of this modal behavior: #11243 and #17353.

Regarding Google's solution, does it work with the mouse wheel, does it work manipulation the scroll bar, does it work on mobile, does it work with scrollable content in the Popover?

[oliviertassinari]

You can implement click away with the ClickAwayListener. I don't think that we need to keep this issue open, I overlap with the one I have linked. Right now, you can use disableScrollLock but positioning won't be right, which is why I was proposing to use the Popper component in the Popover.

[nikossoftwaredev]

Use disableScrollLock prop and with Styles
root: {
position: 'absolute !important',
},

[oliviertassinari]

I can't find the direct duplicate, let's keep it open so we don't forget.

[BierDav]

After investigation, Google prevents scrolling when subscribe popover is opened without hiding the scrollbar.

I think they do something like:

useEffect(() => {
  const preventScrolling = e => e.preventDefault()

  window.addEventListener('scroll', preventScrolling);
  return () => window.removeEventListener('scroll', preventScrolling);
}, []);

i would appreciate a prop that lock scrolling similar to this or this, because when the scrollbar hides and appears again, it changes the view width, which results in unexpected flickering for the user