clauderic / clauderic/dnd-kit

[Experimental] React - destroy effect of plugin not called

Open
#1,620 2 comments 0 reactions 0 assignees View on GitHub
bug needs reproduction case react stale triage:done
Dominant language
TypeScript
Stars
17.6k
Forks
924
Avg merge
2d 10h
Merged PRs (30d)
2

Description

Hi, I'm encountering a bug with the experimental release.

I'm using `useSortable` in react, and in the `onDragEnd` callback I call a method that itself calls a modification of the sortable data.

The problem is that this rerender seems to block the proper destroy step of the plugins (notably `Cursor` and `PreventSelection` which are blocking further drag and drop).

It seems to be because the cleanup takes some time, because if I delay my callback with a setTimeout of 200ms it works. But I'd prefer to avoid this hacky workaround.
It seems to me that it would be good to have onDragEnd be called after the plugins have finished. Or at least have a way to hook to this step..

Contributor guide

Open the contributing guide

Research direction

Start by tracing the experimental React drag lifecycle around useSortable and the onDragEnd callback, focusing on plugin cleanup for Cursor and PreventSelection. Reproduce the issue with a callback that immediately modifies sortable data, compare it with the 200ms delay workaround, and consider the work complete when plugin destruction reliably finishes without the timeout.

Written by the indexing model from the issue text.

Assessment

Tech stack
react, typescript
Domain
frontend
Issue type
Bug
Difficulty
4/5
Estimated time
3-5 days
Activity status
Quiet
Clarity
Mostly clear
Newbie friendliness
45/100

Get new issues in your inbox

A short digest of beginner-friendly GitHub issues.