clauderic / clauderic/dnd-kit

[experimental] Node.removeChild: The node to be removed is not a child of this node

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

Description

I'm using `@dnd-kit/react/sortable` with multiple sortable lists (i.e. multiple groups) and the `OptimisticSortingPlugin`.

Whenever I move an item from one group to another and then try to commit the changes in `onDragEnd` by updating React state I get the following error:

```
DOMException: Node.removeChild: The node to be removed is not a child of this node
```

It seems that React doesn't like that the DOM was modified outside of React. Is there any way to undo the optimistic changes right before calling `setState()`?

The only two differences I see between my code and the [sandbox examples](https://codesandbox.io/p/sandbox/5qwvjf) are:

1. Different React version
2. I'm updating state in `onDragEnd` instead of `onDragOver`. Is this approach not supported?

My React version is `18.3.1` and @dnd-kit/react is `0.1.19`.

Contributor guide

Open the contributing guide

Research direction

Start with the linked CodeSandbox and compare its onDragOver flow with the reported React 18.3.1 and @dnd-kit/react 0.1.19 setup, focusing on OptimisticSortingPlugin and onDragEnd. Reproduce a cross-group move followed by a state update, then establish whether this usage is supported and what behavior prevents the DOMException.

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
Needs clarification
Newbie friendliness
42/100

Get new issues in your inbox

A short digest of beginner-friendly GitHub issues.