angular / angular/components

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

Offen
#20,623 10 Kommentare 4 Reaktionen 0 zugewiesene Personen Auf GitHub ansehen
area: cdk/drag-drop P3
Vorherrschende Sprache
TypeScript
Sterne
25k
Forks
6.8k
Ø Merge
1 T. 8 Std.
Gemergte PRs (30 T.)
91

Beschreibung

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

Beitragsleitfaden

Beitragsleitfaden öffnen

Rechercherichtung

Reproduziere den Fehler mit dem gemeldeten cdkDropList/cdkDrag-Template und wiederholten Drag-and-Drop-Aktionen und vergleiche ihn anschließend mit dem geschlossenen Issue #19359. Beginne beim insertBefore-Stack und dem Verhalten von cdkDropList/cdkDrag; der Bericht in raven-error-handler.ts zeigt, wo die Exception auftritt. Fertig ist die Aufgabe, wenn wiederholtes Ziehen keine DOMException mehr erzeugt.

Vom Indexierungsmodell aus dem Issue-Text verfasst.

Bewertung

Tech-Stack
angular, typescript
Bereich
frontend
Issue-Typ
Bug
Schwierigkeit
4/5
Geschätzter Aufwand
3-5 Tage
Aktivitätsstatus
Veraltet
Klarheit
Größtenteils klar
Anfängerfreundlichkeit
35/100

Neue Issues direkt in Ihr Postfach

Eine kurze Übersicht über anfängerfreundliche GitHub-Issues.