bug(mat-tree): TreeControl's getChildren is called unexpectedly many times since cdk/material v18.2.0 and is especially problematic with asynchronous actions
- Dominant language
- TypeScript
- Stars
- 25k
- Forks
- 6.8k
- Avg merge
- 1d 8h
- Merged PRs (30d)
- 91
Description
### 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
Contributor guide
Research direction
Start with the linked StackBlitz reproductions and compare the getChildren call counts between 18.1.5 and 18.2.X while expanding nodes. Trace the mat-tree TreeControl path that invokes getChildren, then verify the fix produces exactly one call for each expanded node, including asynchronous children.
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