Drag and drop throws NotFoundError when setPointerCapture called on inactive pointer

[colton-demetriou]

Description

During drag-and-drop operations in the Puck editor, the browser occasionally throws a NotFoundError: Failed to execute 'setPointerCapture' on 'Element': No active pointer with the given id is found error. This happens when Puck attempts to capture a pointer that has already been released or is no longer active, causing the drag state to become stuck and requiring a page refresh to restore functionality.

Environment

• Puck version: 0.0.20

Steps to reproduce

1. Render the <Puck /> component with a standard configuration
2. Interact with draggable components in the editor (drag components from the sidebar or reorder existing components)
3. Perform rapid or complex drag operations (e.g., refresh, quickly starting/stopping drags, dragging near iframe boundaries, or switching between different drag targets)

What happens

The drag operation becomes stuck - the component remains attached to the cursor and cannot be released without refreshing the page. The following error occurs intermittently, appearing in the console

Uncaught NotFoundError: Failed to execute 'setPointerCapture' on 'Element': No active pointer with the given id is found.

What I expect to happen

Puck should handle pointer lifecycle correctly and gracefully handle cases where a pointer becomes inactive during drag operations. If a pointer is no longer active when setPointerCapture is called, Puck should either:

1. Check if the pointer is still active before attempting to capture it, or
2. Catch the NotFoundError and gracefully reset the drag state

[FedericoBonel]

Hey @colton-demetriou! Thank you very much for reporting this.

This is indeed an issue we've seen before, and that I thought we had already fixed it.

I don’t doubt you’re running into the bug, but I’m having a hard time reproducing it on my end. I tried cloning our demo and manually triggering multiple reorders across grids, but I wasn’t able to get it to happen. It might be environmentally influenced...

Would you mind sharing an example of your components or the flow you’re following when this occurs? That could help us debug it more effectively and find the best solution. I do think we should at least catch the error and reset the drag state to avoid breaking the UI.

[FedericoBonel]

Also, does this happen mostly in development or production on your end? And which browser tends to trigger the issue most often?