打开时，无法在Material-UI Popover的背景下单击元素

Question

我无法通过Material-UI的Popover组件获得此行为。

我在这里有以下代码示例：https://codesandbox.io/s/88z3nq96jl 查看问题的步骤：

1. 当我单击Filter1按钮时，将显示弹出窗口。
2. 然后，当我单击Filter2按钮时，Filter1的弹出窗口关闭。
3. 然后，我需要再单击一次以显示Filter2的弹出窗口。

但是我不想在打开一个弹出窗口时单击两次，我需要它来关闭上一个弹出窗口并同时打开适当的弹出窗口。

我认为背景幕阻止了点击事件的传播，因此它背后的过滤器永远不会被点击。有办法避免这种情况吗？

Answer 1

我使用的是 Material UI 4.11 和 React 16.13。

您可以将 disableEnforceFocus 设置为 true（防止点击被阻止）并禁用根 css 上的指针事件（允许点击通过背景）。

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


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

Answer 2

根据文档，我认为Material UI的Popper适合您的情况：

  

滚动条和单击键不会像弹出框一样被阻止   零件。弹出窗口的位置会随可用区域更新   在视口中。

演示：