angular / angular/components

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

Aperta
#20,623 10 commenti 4 reazioni 0 assegnatari Vedi su GitHub
area: cdk/drag-drop P3
Lingua principale
TypeScript
Stelle
25k
Fork
6.8k
Merge medio
1g 8h
PR unite (30g)
91

Descrizione

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

Guida per i contributori

Apri la guida per i contributori

Direzione di ricerca

Riproduci il malfunzionamento usando il template cdkDropList/cdkDrag segnalato e azioni ripetute di trascinamento e rilascio, quindi confrontalo con la issue chiusa #19359. Parti dallo stack di insertBefore e dal comportamento di cdkDropList/cdkDrag; il report di raven-error-handler.ts identifica il punto in cui si manifesta l’eccezione. Il lavoro è completato quando trascinamenti ripetuti non producono più una DOMException.

Scritto dal modello di indicizzazione a partire dal testo della issue.

Valutazione

Stack tecnologico
angular, typescript
Ambito
frontend
Tipo di issue
Bug
Difficoltà
4/5
Tempo stimato
3-5 giorni
Stato di attività
Ferma
Chiarezza
Abbastanza chiara
Idoneità per principianti
35/100

Ricevi le nuove issue nella tua casella

Un breve riepilogo di issue GitHub adatte ai principianti.