angular / angular/components

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

Open
#20,623 10 comments 4 reactions 0 assignees View on GitHub
area: cdk/drag-drop P3
Dominant language
TypeScript
Stars
25k
Forks
6.8k
Avg merge
1d 8h
Merged PRs (30d)
91

Description

#### 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:

```



```
#### 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

Contributor guide

Open the contributing guide

Research direction

Reproduce the failure using the reported cdkDropList/cdkDrag template and repeated drag-and-drop actions, then compare it with closed issue #19359. Start from the insertBefore stack and the cdkDropList/cdkDrag behavior; the raven-error-handler.ts report identifies where the exception surfaces. Done means repeated dragging no longer produces the DOMException.

Written by the indexing model from the issue text.

Assessment

Tech stack
angular, typescript
Domain
frontend
Issue type
Bug
Difficulty
4/5
Estimated time
3-5 days
Activity status
Stale
Clarity
Mostly clear
Newbie friendliness
35/100

Get new issues in your inbox

A short digest of beginner-friendly GitHub issues.