components icon indicating copy to clipboard operation
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

Open lmuraru-plenty opened this issue 1 year ago • 4 comments
trafficstars

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:

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

lmuraru-plenty avatar Nov 14 '24 10:11 lmuraru-plenty

Same issue here. Is there a solution or workaround?

ThRintelen avatar Mar 12 '25 19:03 ThRintelen

Same issue here. We can't upgrade to V19 with this behavior.

Neill83 avatar Mar 21 '25 08:03 Neill83

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?

palfitunde avatar Mar 21 '25 09:03 palfitunde

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.

lmuraru-plenty avatar May 16 '25 08:05 lmuraru-plenty