You signed in with another tab or window. Reload to refresh your session.You signed out in another tab or window. Reload to refresh your session.You switched accounts on another tab or window. Reload to refresh your session.Dismiss alert
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)
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.
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.
Is this a regression?
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
Reproduction
StackBlitz link: https://stackblitz.com/edit/a9tq3w?file=src%2Fexample%2Fcdk-drag-drop-connected-sorting-example.html
Steps to reproduce:
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
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
The text was updated successfully, but these errors were encountered: