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

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

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

[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?