angular / angular/components

bug(mat-tree): TreeControl's getChildren is called unexpectedly many times since cdk/material v18.2.0 and is especially problematic with asynchronous actions

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

Descrizione

### Is this a regression?

- [x] Yes, this behavior used to work in the previous version

### The previous version in which this bug was not present was

18.1.5

### Description

I've recently upgraded a project's `@angular/cdk` & `@angular/material` packages to 18.2, and I noticed a problem with the `TreeControl` when `getChildren` was asynchronous: sometimes it would result in an infinite loop of asynchronous actions; other times, it would perform a very large number of asynchronous actions; previous to 18.2 (18.1.5 was the last version it worked as expected), it would have only started a single asynchronous action per node. This is especially noticeable when the asynchronous action involves some kind of XHR.

Looking a bit further into it, I noticed that synchronous `getChildren` calls have also regressed in 18.2.0: there are now a lot more calls to this method than in cdk/material 18.1.5.

### Reproduction

18.2.X:

StackBlitz link: [StackBlitz 18.2.X](https://stackblitz.com/edit/stackblitz-starters-acc226?file=src%2Fmain.ts)
Steps to reproduce:
1. Play around with the expand icons
2. Notice the number of calls to getChildren at the top of the rendered page - it increases wildly more than the previous minor cdk/material version, and sometimes enters a seemingly infinite loop

### Expected Behavior

There should be exactly 1 call to `getChildren` for each expanded node

18.1.X:

StackBlitz link: [StackBlitz 18.1.X](https://stackblitz.com/edit/stackblitz-starters-pkwrp2?file=src%2Fmain.ts)
Steps to reproduce:
1. Play around with the expand icons
2. Notice the number of calls to getChildren at the top of the rendered page - it increases by 1 for each expanded node

### Actual Behavior

The number of calls to `getChildren` increases wildly, and I've also managed to un-deterministically enter a seemingly infinite loop.

### Environment

- Angular: 18.X.Y (reproduced on 18.1.X and 18.2.X)
- CDK/Material: all versions since 18.2.0
- Browser(s): Google Chrome 130
- Operating System (e.g. Windows, macOS, Ubuntu): macOS

Guida per i contributori

Apri la guida per i contributori

Direzione di ricerca

Inizia con le riproduzioni StackBlitz collegate e confronta il numero di chiamate a getChildren tra 18.1.5 e 18.2.X durante l'espansione dei nodi. Segui il percorso TreeControl di mat-tree che invoca getChildren, quindi verifica che la correzione produca esattamente una chiamata per ogni nodo espanso, inclusi i nodi figli asincroni.

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.