材料UI-是否有方法允许右键单击关闭Modal



我希望能够右键单击关闭Menu(或者更具体地说,关闭Popover(,清除任何mousedown事件。

我在文档中发现了这一点:https://material-ui.com/components/menus/#MenuListComposition.js

然后我把它清洗了一点。以下是我得到的:https://codesandbox.io/s/material-ui-react-8nqqb?fontsize=14&隐藏导航=1&主题=深色

如果你检查它,你可以看到Popper在右键单击时关闭,但现在我可以在菜单打开时滚动页面:/

这几乎是我所需要的,但我无法对Popover做同样的事情,因为它在内部使用Modal,而且他们似乎要么不使用ClickAwayListener,要么没有公开修改其道具的方法。

因此,如果有人知道如何使mousedown事件关闭Popover或在Popper打开时阻止滚动,我将非常乐意听到任何解决方案。

提前谢谢。

编辑:

多亏了这个答案,我找到了方向,我调整了给定的沙盒,我成功地做了我想做的事。我最后不得不使用Popper,并在它打开时阻止滚动。

这是最后一个沙盒链接:https://codesandbox.io/embed/material-ui-react-1qroy?fontsize=14&隐藏导航=1&主题=深色

如果popper打开,这里有一种禁用滚动的方法。

window.onscroll = open ? null : () => window.scrollTo(0, 0);

https://codesandbox.io/s/material-ui-react-zysue

以下是popover而不是popper 的相同示例

https://codesandbox.io/s/material-ui-react-n0bf9

最新更新