当“打开”道具设置为“真”时,Material-UI Popper仍然可见

时间:2019-04-12 11:27:54

标签: reactjs material-ui popper.js

我正在使用Material-UI Popper component,并将其与keepMounted道具集一起使用。

我遇到的问题是,当Popper的组件open道具为false时,popper会超出窗口边界,但仍然可见。

问:,当Popper组件的open为false时,应使用什么方法来确保Popper不可见/不显示? 我研究了它(更多信息,请参见下文),但没有成功。

我在此处设置了small repro和示例代码: https://codesandbox.io/embed/389w75jpom

当工具提示/弹出窗口“未显示”时,滚动到底部,并注意它仍然可见。单击该按钮可切换Popper组件的open属性的值。

我希望在openfalse的同时仍使用keepMounted的情况下隐藏弹出窗口。我希望它根本不显示(例如display: none),而不只是不可见。

从Material-UI文档中,我看到可以使用popper.js道具传递modifiers修饰符,并专门查看modifiers~hide。 在the doc中提到了hide修饰符:

  

[...]将设置一个x-out-of-boundaries属性,当其引用超出边界时,可以使用CSS选择器隐藏该popper。

根据文档,默认情况下应启用此修饰符,但似乎x-out-of-boundaries属性似乎并未应用到弹出容器div 。 因此,在这种情况下,我无法依靠CSS选择器。

我还发现了这个GH问题,我相信它导致了hide修饰符的实现。

我试图将[1]传递给修饰符hidePopper的功能与建议的in the same GH issue here类似,以检测弹出器何时进入和退出边界并相应地设置其样式。这是以前的repro的一个分支,其中的代码已更新以反映这一点: https://codesandbox.io/embed/jvr6oy95j3

但是在此处进行测试时,传递给该函数的boundaries对象上没有data属性(请参见控制台日志): https://jvr6oy95j3.codesandbox.io/

很抱歉,如果我缺少任何东西,对此表示感谢。谢谢

[1]通过hide.fn修饰符属性。

0 个答案:

没有答案