Can't click elements under Material-UI Popover's backdrop when it's open

Question

I can't get this behavior with Material-UI's Popover component.

I have this code example here: https://codesandbox.io/s/88z3nq96jl Steps to see the problem:

1. When I click on Filter1 button, the popover shows up.
2. Then, when I click on Filter2 button, Filter1's popover closes.
3. Then, I need to click another time to get Filter2's popover to show up.

But I don't want to click twice when one of the popover is open, I'd need it to close the previous one and open the proper one at the same time.

I think the backdrop is stopping click events from propagating, so the filter behind it gets never clicked. Is there a way I can avoid that?

Answer 1

I'm using Material UI 4.11 and React 16.13.

You can set disableEnforceFocus to true (prevent the clicks from being blocked) and disable pointer events on the root css (allow clicks to pass through the backdrop).

    const styles = makeStyles<Theme>((theme) => ({
        popover: {
          pointerEvents: "none",
        },
    }));


    <Popover  
      classes={{ root: classes.popover}}
      disableEnforceFocus={true}
    >
    </Popover>

Answer 2

I think the Material UI's Popper is suitable for your case, from the documentation:

The scroll and click away aren't blocked like with the Popover component. The placement of the popper updates with the available area in the viewport.

Demo: