components
components copied to clipboard
bug(mat-tree): TreeControl's getChildren is called unexpectedly many times since cdk/material v18.2.0 and is especially problematic with asynchronous actions
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 Steps to reproduce:
- Play around with the expand icons
- 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 Steps to reproduce:
- Play around with the expand icons
- 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
Same issue here. Is there a solution or workaround?
Same issue here. We can't upgrade to V19 with this behavior.
I run into the same issue. I see this bug is open for a few months now. It is blocking me to upgrade to Angular v19. Is there a solution or at least a workaround?
Hi! Can I have an update on the status of this issue?
I just want to point out that this is a blocker for my app, which contains >40 trees. I can't update to 18.2 and beyond before migrating all of the trees, and also can't migrate the trees without updating to 18.2 first, meaning that it's an all or nothing situation. And I assume this is a problem for many other apps.
It's strange that the TreeControl API was deprecated and broken in the same minor version.
Moreover, is the priority of this issue still the correct one? Trees before 18.2 that are still using the deprecated API beyond 18.2 are at the very least a performance problem.
I would really appreciate having a conclusion on the issue, whichever one that is.