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

[JannesMeyer]

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 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.

[matheusAle]

I have the same issue and question ⏫

[fantasy-zeng]

any solution?

[matheusAle]

@fantasy-zeng, this lib required us to optimistically add the drag item to the drop target droppable. Not doing so will cause this error.

I needed to call a mutation only when the element drops, but onDragEnd will always have the source and the target as the same element, as you may have notice.

What I did was, create a ref with my update payload and change it on DragDropProvider#onDragOver callback and optimistically move the source to the target droppable when it is moved to a new one.

const dropUpdate = useRef<any>({});

<DragDropProvider
  onDragOver={({ operation }) => {
    const { target, source, shape, position } = operation;

    //? when we move the item to a new list, this callback is called again when source as the target 
    if (target.id === source.id) {
      return;
    }

   // ... check for source and target droppable groups
 }}

[Boltawy]

@matheusAle Could you please clarify more ? I have the same issue.

[Boltawy]

Is there any way to undo the optimistic changes right before calling setState()?

This. My technical knowledge is limited, but I don't see why this isn't provided in a simple way by dnd-kit. edit: formatting

[clauderic]

Just call event.preventDefault() in onDragOver to prevent optimistic sorting from happening. Pretty sure this is documented, feel free to open a PR if you think the docs can be improved.

I’ll investigate the root issue when I can.

[Boltawy]

Just call event.preventDefault() in onDragOver to prevent optimistic sorting from happening. Pretty sure this is documented, feel free to open a PR if you think the docs can be improved.

I’ll investigate the root issue when I can.

Thanks for the reply. Yes it's indeed documented and I was aware of it, but that meant I'd have to implement full state setting logic.

I did so but decided to revert back to @dnd-kit/core.