今天协助同事解决了一个问题，就是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>