Shopify App Bridge模态框内Drag-and-Drop（dnd-kit）无法正常工作的问题求助

大家好！我最近在开发Shopify应用时遇到了一个头疼的问题：我用dnd-kit实现的拖拽功能，在普通React组件里完全正常，但一旦把它放到@shopify/app-bridge-react的<Modal>组件里，就彻底失效了。

我的技术栈配置： #

• 框架：React（基于@shopify/app-bridge-react开发）
• 拖拽库：dnd-kit，具体依赖版本如下：
  • @dnd-kit/core: ^6.3.1
  • @dnd-kit/sortable: ^10.0.0
  • @dnd-kit/modifiers: ^9.0.0
  • @dnd-kit/utilities: ^3.2.2
• 模态框：使用Shopify App Bridge官方提供的<Modal>组件

我已经尝试过的排查和解决方法： #

• 延迟初始化拖拽上下文：在useEffect里用setTimeout，等模态框完全打开后再渲染DndContext和可拖拽项
• 确保模态框完全挂载后才渲染拖拽相关组件
• 反复调试了pointer-events和z-index样式，确认没有被遮挡或者事件被阻止的情况
• 验证过在模态框外的普通React组件中，拖拽功能完全正常

发现的特殊现象： #

我偶然发现，只要我先和应用的其他区域交互一下（比如点击侧边栏的菜单选项），模态框里的拖拽功能就会突然正常工作。这让我怀疑是不是App Bridge的模态框环境有什么特殊的初始化或渲染时机问题，导致dnd-kit的事件监听没有正确绑定？

有没有其他开发者遇到过同样的问题？或者有没有靠谱的解决方案能让dnd-kit在App Bridge模态框里正常工作？万分感谢大家的帮助 🙏

内容来源于stack exchange