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.

Solution 1

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

Solution 2

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.

Solution 3

To implement the correct behavior you can use Popper with Clickawaylistener

Solution 4

I stumbled upon this question when trying to fix the same problem. Improving upon @Tommy's answer, I've found a working solution:

const NewPopover = (props) => {
  const containerRef = React.useRef();

  // Box here can be any container. Using Box component from @material-ui/core

  return (
    <Box ref={containerRef}>
      <Popover {...props} container={containerRef.current}>
        Popover text!
      </Popover>
    </Box>
  );
};

View more solutions

Comments

[Tommy]

thanks for your answer. but Popper has click away property which is not desirable in my project. is there any other way using Popover?

[Ryan Cogswell]

When your Popover/Popper is displayed, what action(s) do you want to trigger making it go away?

[Tommy]

please upvote my question and answer if this helps you.

[Rani]

If you attach it to the parent node it won't move with the node when you scroll

[Lucas Willems]

What is this.AnchorEL?

[adir abargil]

replace it with the element you attach the menu to