React Aria中从Popover内触发Modal对话框的焦点冲突问题求助
React Aria中从Popover内触发Modal对话框的焦点冲突问题求助
我基于react-aria-components封装了两个自定义组件:
- ComboBox:组件下方会渲染一个Popover来展示选项列表;当没有可选项时,Popover内会显示空状态内容
- Modal:对React Aria原生的Modal、Dialog和ModalOverlay做了轻量封装,主要用来自定义样式
现在碰到了一个头疼的问题:我给ComboBox的空状态加了一个带按钮的DialogTrigger,点击按钮本应弹出Modal来创建新资源,但实际操作时却出了问题——点击按钮后,Modal的焦点陷阱机制会触发,这会让ComboBox的Popover失去焦点并触发blur事件,直接导致Popover被卸载,连带里面的DialogTrigger和Modal也一起被卸载,结果就是Modal刚弹出来就立刻消失了。
我想问问有没有小伙伴遇到过类似的场景?就是用React Aria的组件(这里是Popover内的触发按钮)唤起另一个Dialog的情况,有没有成熟的解决方案能让Modal打开时,ComboBox的Popover保持挂载不消失?
如果有哪里我没说清楚的地方,随时问我~提前谢谢大家的帮助!
备注:内容来源于stack exchange,提问作者Carwyn Stephen
相关产品推荐
相关产品推荐

