clauderic / clauderic/dnd-kit

Sortable stops working after dropping into a nested droppable and removing the source item from the current list

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

Description

## Environment

- `@dnd-kit/react`: `0.4.0-beta-20260412134659`
- React: `19.2.0`
- React DOM: `19.2.0`

## Summary

I found a case where sortable behavior breaks after dropping an item into a folder-like container and then removing the source item from the current list.

In my setup, a folder item is registered as both:

- a sortable target: `folder::outside`
- a droppable target: `folder::inside`

Both refs are attached to the same DOM element.

If a draggable item first triggers sortable reorder preview relative to that folder, and then is dropped into the folder's `inside` target, I remove the source item from the current list in `onDragEnd`.

After that, subsequent sortable drags in the same `DragDropProvider` may stop updating their sortable position.

## Reproduction

I created a minimal repro here:
[`dnd-kit_react_report`](https://github.com/welkinwong/dnd-kit_react_report)

Steps:

1. Run the repro app.
2. Drag `Doc A (repro item)` to the left side of `Folder A` so the sortable preview changes order.
3. Keep holding the pointer.
4. Move into `Folder A` and release.
5. The source item is removed from the current list in `onDragEnd`.
6. Try dragging another doc again.

## Actual result

Subsequent sortable drags in the same provider may stop updating their sortable position after that sequence.

## Expected result

Subsequent sortable drags should continue to work normally after dropping into a folder and removing the source item from the current list.

## Important observations

- If I do **not** remove the source item, the problem does not happen.
- If I delay the removal by `1000ms`, the problem still happens when the removal finally occurs.
- If I perform the same move in another browser window, this window receiving the reactive data update stays normal.
- If I force-remount the `DragDropProvider` after the move, sortable behavior is restored.

This makes it look like the problem is tied to the current `DragDropProvider` instance after an `inside` drop followed by source-list removal, rather than the data update itself.

## Notes

The repro uses a folder item that is both:

- `useSortable({ id: "folder::outside" })`
- `useDroppable({ id: "folder::inside" })`

with both refs attached to the same DOM element.

Contributor guide

Open the contributing guide

Assessment

This issue has not been assessed yet.

Get new issues in your inbox

A short digest of beginner-friendly GitHub issues.