2022年10月12日
今天协助同事解决了一个问题,就是react-daterange-picker 和 react-date-picker 在@material-ui的dialog中出现选择日历点击一次就直接关闭的问题。
通过查看源码后发现,在picker组件中对document的mousedown、focusin、touchstart进行了全局监听,只要这三个事件触发了,就会判断触发该事件的src Element是否在picker组件范围内,如果不在就会关闭该picker组件。
在mui中,默认做了自动聚焦的操作,当事件冒泡触发到mui的dialog组件之后,dialog组件会去检查当前聚焦的srcElement是否是它自己,如果不是的话,就会调用focus方法,如此一来才会出现那种问题。
解决办法除了看picker组件的源码之外,还查阅了(mui的官方文档#焦点陷阱)[https://v4.mui.com/zh/components/modal/#limitations],之后又去查看了mui的Dialog源码,这个组件的源码中使用了Modal,Modal组件中又使用了Unstable_TrapFocus,在Unstable_TrapFocus组件中监听了全局的focus,这个focus中就会判断当前模态框是否包含已激活的元素,如果是的话,就会调用当前Modal的focus方法。
其它类似的问题也是这样解决的,原理就是禁用mui组件中的自动聚焦的功能,从而阻断干扰,源码中有对disableEnforceFocus的处理。
<Dialog
disableEnforceFocus
></Dialog>
上次更新时间: 10年18月2023日 01时57分53秒