我正在使用Material-UI Popper
component,并将其与keepMounted
道具集一起使用。
我遇到的问题是,当Popper的组件open
道具为false
时,popper会超出窗口边界,但仍然可见。
问:,当Popper组件的open
为false时,应使用什么方法来确保Popper不可见/不显示?
我研究了它(更多信息,请参见下文),但没有成功。
我在此处设置了small repro和示例代码: https://codesandbox.io/embed/389w75jpom
当工具提示/弹出窗口“未显示”时,滚动到底部,并注意它仍然可见。单击该按钮可切换Popper组件的open
属性的值。
我希望在open
为false
的同时仍使用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
修饰符属性。