Material UI - Unblock scrolling when popover is opened

Question

The scroll is blocked with Popover according to the new material-ui version doc.

When i open the popover, the scroll-bar of the web page suddenly disappeared and it's not the part of user experience in my opinion.

I wanna keep the scroll bar visible while popover is open.

I'm using Material-UI V3.8.1.

Answer 1

The property you are looking for is called disableScrollLock. But using this, does not recalculate the modals positioning and you will have a floating modal in your application. Instead, as described by a few others here, the Popper should be used.

Answer 2

it can be fixed by using container props of Popover. container props is a node, component instance or function that returns either. The container will passed to the Modal component. By default, it uses the body of the anchorEl's top-level document object, so it's simply document.body most of the time. This default setting is making document removing scroll bar. So i just used its direct parent for container instead of default setting and it solved the problem. :)

<Popover
  open={...}
  anchorEl={...}
  anchorOrigin={...}
  container={this.AnchorEl.parentNode}
>

Thanks