Drag-and-Drop (dnd-kit) Not Working Inside Shopify App Bridge Modal

Shopify Apps
1

Hi everyone :waving_hand: ,

I’m facing an issue using dnd-kit inside a Shopify App Bridge . The drag-and-drop functionality works perfectly outside the modal, but stops working when placed inside the modal.

Setup:- Framework: React (using @Shopify_77 /app-bridge-react)

  • DnD package: dnd-kit

  • Modal: from @Shopify_77 /app-bridge-react

"@dnd-kit/core": "^6.3.1",
"@dnd-kit/sortable": "^10.0.0",
"@dnd-kit/modifiers": "^9.0.0",
"@dnd-kit/utilities": "^3.2.2"

What I’ve tried:- Delaying the initialization of DndContext until after the modal is open (using setTimeout in useEffect)

  • Ensuring modal is fully mounted before rendering sortable items

  • Debugging pointer-events and z-index issues

  • Confirmed it works fine in a regular React component outside the modal

Observation:

I have to interact with some other part of the app (e.g. clicking a sidebar menu) before drag-and-drop starts working inside the modal. This makes me suspect some initialization or rendering timing issue within the App Bridge modal environment.

Has anyone else faced this issue or found a reliable workaround for drag-and-drop inside App Bridge modals?

Any help would be greatly appreciated :folded_hands:

2

Can you please provide a working example? I’ve been stuck on this issue for the past four days and have tried everything I could think of — from re-initializing the dnd-kit context to adjusting modal configurations — but nothing has worked so far. It would be a huge help if you could share a working code snippet or guide me in the right direction. I would really appreciate your support in resolving this.