bug(drag-drop): Failed to execute insertBefore on Node

[SebastianPodgajny]

Is this a regression?

• Yes, this behavior used to work in the previous version

The previous version in which this bug was not present was

No response

Description

When drag and drop is used and data refreshes in background this error can be thrown

ERROR DOMException: Failed to execute 'insertBefore' on 'Node': The node before which the new node is to be inserted is not a child of this node.

Reproduction

StackBlitz link: https://stackblitz.com/edit/a9tq3w?file=src%2Fexample%2Fcdk-drag-drop-connected-sorting-example.html
Steps to reproduce:

1. Keep moving first element to the bottom (fast)

Expected Behavior

Drag and drop should not cause DOMException

Actual Behavior

Screen.Recording.2024-07-01.at.16.25.46.mp4

Screen.Recording.2024-07-01.at.16.26.19.mp4

ERROR DOMException: Failed to execute 'insertBefore' on 'Node': The node before which the new node is to be inserted is not a child of this node.
    at EmulatedEncapsulationDomRenderer2.insertBefore (/vendor.js:84094:20)
    at BaseAnimationRenderer.insertBefore (/vendor.js:17733:19)
    at nativeInsertBefore (/vendor.js:50345:12)
    at applyToElementOrContainer (/vendor.js:49879:7)
    at applyNodes (/vendor.js:50571:9)
    at applyView (/vendor.js:50578:3)
    at addViewToDOM (/vendor.js:49947:3)
    at addLViewToLContainer (/vendor.js:52300:7)
    at LiveCollectionLContainerImpl.attach (/vendor.js:63156:5)
    at LiveCollectionLContainerImpl.swap (/vendor.js:62667:12)

Environment

Angular CLI: 18.0.2
Node: 18.20.3
Package Manager: yarn 1.22.19
OS: linux x64

Angular: 18.0.1
... animations, common, compiler, compiler-cli, core, forms
... localize, platform-browser, platform-browser-dynamic, router

Package Version

@angular-devkit/architect 0.1800.2
@angular-devkit/build-angular 18.0.2
@angular-devkit/core 18.0.2
@angular-devkit/schematics 18.0.2
@angular/cdk 18.0.5
@angular/cli 18.0.2
@angular/material 18.0.5
@angular/material-experimental 18.0.5
@angular/material-moment-adapter 18.0.5
@schematics/angular 18.0.2
rxjs 7.4.0
typescript 5.4.5
zone.js 0.14.6

[crisbeto]

I spent a bit of time investigating it. The problem is that we need to insert some elements while the dragging is happening (e.g. the placeholder and the preview) which get cleaned up once it's done, but in this case @for is trying to re-render while those elements are still there. Normally we have some backup logic in place which will do the cleanup if the dragged element is destroyed, but that doesn't happen here because @for tries to reuse the element rather than destroy it. There isn't an API that we can use to be notified when something like this has happened.

I'm setting a lower priority on this, because it's a bit of an edge case and in general it's not recommended to change the data while the user is dragging since they might not notice what's going on.

[wall-street-dev]

As a workaround you could @defer() the element within the loop:

    @for (item of todo; track item) {
      @defer() {
        <div class="example-box" cdkDrag>{{item}}</div>
      }
    }

[ot-esteinecke]

I'm setting a lower priority on this, because it's a bit of an edge case and in general it's not recommended to change the data while the user is dragging since they might not notice what's going on.

This happens for me because the default behavior is removing the item on CdkDragExit. I have to replace it in the list because I didn't want the user to notice a difference while dragging since that is disruptive to the user experience. If there was an option to preserve the item while its being moved then this would be a non-issue, at least for me.

It also occurs with *ngFor. I had to rewrite my code a smidge to apply the workaround listed above.