[experimental] Node.removeChild: The node to be removed is not a child of this node
- 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
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