bug(CDK DragAndDrop): Occasional Fatal Error similar to closed issue #19359

[mwawrusch]

Reproduction

Drag and drop a few times (5 to 20). The error below pops up. Looks similar to closed issue 19359

Code looks like this:

  <div class="center-column uptick-fancy-scrollbar"
       *ngIf="!editPriorityActive" uptickDropList cdkDropList
       (cdkDropListDropped)="onMoved2($event)">
    <div cdkDrag
         cdkDragLockAxis="y"
         [cdkDragStartDelay]="0.1"
         [cdkDragDisabled]="false"
         [cdkDragData]="priority"
         (cdkDragStarted)="onDragStarted($event)"
         (cdkDragReleased)="onDragReleased($event)"
         *ngFor="let priority of newPriorities$|async;let i=index;let c=count "
         class="feature-one-one-priorities-dragged-container local-container">

Expected Behavior

No bugs...

Actual Behavior

What behavior did you actually see?

raven-error-handler.ts:11 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 (http://localhost:4200/vendor.js:111866:20)
    at BaseAnimationRenderer.insertBefore (http://localhost:4200/vendor.js:110877:23)
    at nativeInsertBefore (http://localhost:4200/vendor.js:40265:18)
    at applyToElementOrContainer (http://localhost:4200/vendor.js:39835:13)
    at applyNodes (http://localhost:4200/vendor.js:40460:17)
    at applyView (http://localhost:4200/vendor.js:40492:5)
    at addRemoveViewFromContainer (http://localhost:4200/vendor.js:39861:9)
    at ViewContainerRef.insert (http://localhost:4200/vendor.js:41248:17)
    at ViewContainerRef.createEmbeddedView (http://localhost:4200/vendor.js:41200:22)
    at http://localhost:4200/vendor.js:26206:50
    at DefaultIterableDiffer.forEachOperation (http://localhost:4200/vendor.js:50416:17)
    at NgForOf._applyChanges (http://localhost:4200/vendor.js:26201:17)
    at NgForOf.ngDoCheck (http://localhost:4200/vendor.js:26196:22)
    at callHook (http://localhost:4200/vendor.js:34148:14)
    at callHooks (http://localhost:4200/vendor.js:34114:17)
handleError @ raven-error-handler.ts:11
(anonymous) @ core.js:28361
invoke @ zone-evergreen.js:364
run @ zone-evergreen.js:123
runOutsideAngular @ core.js:27364
tick @ core.js:28361
(anonymous) @ core.js:28240
invoke @ zone-evergreen.js:364
onInvoke @ core.js:27437
invoke @ zone-evergreen.js:363
run @ zone-evergreen.js:123
run @ core.js:27319
next @ core.js:28239
schedulerFn @ core.js:24801
__tryOrUnsub @ Subscriber.js:183
next @ Subscriber.js:122
_next @ Subscriber.js:72
next @ Subscriber.js:49
next @ Subject.js:39
emit @ core.js:24791
checkStable @ core.js:27373
onLeave @ core.js:27483
onInvokeTask @ core.js:27431
invokeTask @ zone-evergreen.js:398
runTask @ zone-evergreen.js:167
invokeTask @ zone-evergreen.js:480
invokeTask @ zone-evergreen.js:1621
globalZoneAwareCallback @ zone-evergreen.js:1647

Environment

• Angular: 10.0.12
• CDK/Material: 10.1.3
• Browser(s): any
• Operating System (e.g. Windows, macOS, Ubuntu): any

[crisbeto]

It's a little hard to deconstruct what might be going on based on the code alone. Can you post an example that shows it breaking? You can open one of the examples from the docs (https://material.angular.io/cdk/drag-drop/examples) and fork it on Stackblitz.

[mwawrusch]

You can use the same example from the other issue:

https://stackblitz.com/edit/angular-9-material-drag-drop?file=src%2Fapp%2Fapp.component.html

Broke after 4 d&d attempts for me.

[sammaphey]

I was able to reproduce this is an angular component. Specifically when you utilize a table and have elements inside of the table rows that are drag and droppable.

[mwawrusch]

Great, thank you.
This is a show stopper for us that prevents us from releasing a major part of our app to production, is there a chance for a hotfix?

Thanks
Martin

[Achilles1515]

You can use the same example from the other issue:
https://stackblitz.com/edit/angular-9-material-drag-drop?file=src%2Fapp%2Fapp.component.html

I followed this StackBlitz, updated the dependencies, enabled Ivy, and am not seeing any errors when drag and dropping (Chrome). After doing these steps, is there a specific sequence of drag-drops you can do to replicate the error?

I was able to reproduce this is an angular component. Specifically when you utilize a table and have elements inside of the table rows that are drag and droppable.

@sammaphey Can you post a StackBlitz?

[mwawrusch]

For me, it happens completely randomly. Sometimes after 4 d&ds, but then one time it took more than 20.

[crisbeto]

@mwawrusch are you sure that you're on the latest version of @angular/cdk? I'm seeing the same as @Achilles1515 where it break consistently with the provided Stackblitz, but it stops as soon as I update it to ^10.2.0.

[mwawrusch]

@crisbeto Just saw this, thanks.
This was detected with CDK/Material: 10.1.3 - I'll update to 10.2.0 and report back.

[mwawrusch]

So after testing with 10.2.3 and the latest angular we still see this behavior, but less. It looks to me that it happens when the source for the list of draggable items is updated at the wrong moment in time.

Here are the versions we used.

    "@angular/animations": "10.1.3",
    "@angular/cdk": "10.2.3",
    "@angular/common": "10.1.3",
    "@angular/compiler": "10.1.3",
    "@angular/core": "10.1.3",
    "@angular/flex-layout": "10.0.0-beta.32",
    "@angular/forms": "10.1.3",
    "@angular/material": "10.2.3",
    "@angular/platform-browser": "10.1.3",
    "@angular/platform-browser-dynamic": "10.1.3",
    "@angular/router": "10.1.3",
    "@auth0/angular-jwt": "5.0.1",
    "@ngrx/effects": "10.0.0",
    "@ngrx/entity": "10.0.0",
    "@ngrx/router-store": "10.0.0",
    "@ngrx/store": "10.0.0",

[crisbeto]

Can you post a step-by-step of the drags that you're making? I did manage to reproduce a similar error if I slow down the transitions a lot (250ms to 2500ms) and I start dragging from a connected list while an item from another list is finishing its animation. Does the error happen when you're making a lot of quick drags one after the other?