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

examan commented 3 months ago

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

maxime1992 commented 2 months ago

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 commented 2 months ago

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 :pray:!

BobobUnicorn commented 2 months ago

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.

angular / components