Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

bug(tree): Using cdk-tree with ArrayDataSource and synchronous data, the isExpanded functionality can fail. #29669

Open
1 task
examan opened this issue Aug 30, 2024 · 3 comments · May be fixed by #29751
Open
1 task
Labels
area: material/tree needs investigation A member of the team needs to do further investigation to determine the root cause P2 The issue is important to a large percentage of users, with a workaround

Comments

@examan
Copy link

examan commented Aug 30, 2024

Is this a regression?

  • Yes, this behavior used to work in the previous version

The previous version in which this bug was not present was

No response

Description

Using cdk-tree with ArrayDataSource and synchronous data, the isExpanded functionality can fail.

Reproduction

StackBlitz link: https://stackblitz.com/edit/2ypkpy-yxnpzh?file=src%2Fexample%2Fcdk-tree-flat-children-accessor-example.ts
Steps to reproduce:
load the page

Expected Behavior

All nodes automatically expand.

Actual Behavior

Some nodes did not automatically expand.

Environment

     _                      _                 ____ _     ___
    / \   _ __   __ _ _   _| | __ _ _ __     / ___| |   |_ _|
   / △ \ | '_ \ / _` | | | | |/ _` | '__|   | |   | |    | |
  / ___ \| | | | (_| | |_| | | (_| | |      | |___| |___ | |
 /_/   \_\_| |_|\__, |\__,_|_|\__,_|_|       \____|_____|___|
                |___/
    

Angular CLI: 18.2.1
Node: 18.20.3
Package Manager: yarn 1.22.19
OS: linux x64

Angular: 18.2.2
... animations, cdk, common, compiler, compiler-cli, core, forms
... localize, material, material-experimental
... material-moment-adapter, platform-browser
... platform-browser-dynamic, router

Package                         Version
---------------------------------------------------------
@angular-devkit/architect       0.1802.1
@angular-devkit/build-angular   18.2.1
@angular-devkit/core            18.2.1
@angular-devkit/schematics      18.2.1
@angular/cli                    18.2.1
@schematics/angular             18.2.1
rxjs                            7.4.0
typescript                      5.5.4
zone.js                         0.14.10
  • Browser(s): Edge 127.0.2651.105
  • Operating System (e.g. Windows, macOS, Ubuntu): Windows 11
@examan examan added the needs triage This issue needs to be triaged by the team label Aug 30, 2024
@examan examan changed the title bug(tree): Using cdk-tree with ArrayDataSource and synchronous data, if trackBy is not set to identity, the isExpanded functionality can fail. bug(tree): Using cdk-tree with ArrayDataSource and synchronous data, the isExpanded functionality can fail. Aug 30, 2024
@maxime1992
Copy link

Shouldn't the cdk-tree-node have [isExpanded]="true" in order to have everything expended by default?

It doesn't change the fact that there's an issue of course, but to get your workaround working I had to add that

@maxime1992
Copy link

Ok I finally got the mat tree working as expected in my app. There's definitely a bug as pointed out by @examan and BTW thanks a lot for providing a workaround, saved me a ton of time 🙏!

@BobobUnicorn
Copy link
Collaborator

I took a quick look at this; I suspect the issue ultimately comes from the fact that we're only getting isExpanded information when the node is rendered. This causes the _renderDataChanges call to trigger expansion model changes, which then aren't picked up by the rendering pipeline as that subscription only registers after the first complete run of the subscribed function. I'm not currently sure what a good fix for it is, but it does mean that this all has to be computed in multiple stages.

@wagnermaciel wagnermaciel added P2 The issue is important to a large percentage of users, with a workaround needs investigation A member of the team needs to do further investigation to determine the root cause area: material/tree and removed needs triage This issue needs to be triaged by the team labels Oct 18, 2024
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Labels
area: material/tree needs investigation A member of the team needs to do further investigation to determine the root cause P2 The issue is important to a large percentage of users, with a workaround
Projects
None yet
Development

Successfully merging a pull request may close this issue.

4 participants