You need to enable JavaScript to run this app.
优惠活动
大模型
产品
解决方案
定价
更多

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

相关产品推荐
方舟 Agent Plan

超全模态模型 × Harness 升级,最新支持 Deepseek-V4.1-Flash、GLM-5.3 系列、Doubao-Seedream-5.0-pro、Kimi-K3 (部分), 限时 9.9 元起

最近更新时间:2026.04.14 08:53:10