bug(cdk-tree): CDK Tree can't be opened when trackBy function is used after update of datasource

[MeMeMax]

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

Angular 17 (here is the same example: https://stackblitz.com/edit/zmfrj6ks?file=src%2Fexample%2Fcdk-tree-nested-example.ts,src%2Fexample%2Fcdk-tree-nested-example.html with Angular 17)

Description

Hi, there is a bug in the Angular CDK Tree. When you update the data of the tree and a trackBy function is given to the tree, you can't interact with the tree anymore.

Reproduction

StackBlitz link: https://stackblitz.com/edit/fesfbplt?file=src%2Fexample%2Fcdk-tree-nested-children-accessor-example.html
Steps to reproduce:

1. interact with the tree (not mandatory, but you see that it works)
2. click on "changeTree" button
3. try to open the tree again => this doesn't work

Expected Behavior

Tree should be updateable and interactive after an update. I would also expect that the open state is kept when only part of the tree is changed (in the example one subtree is removed, the other persists) and a trackby function is given.

Actual Behavior

Tree is closed and not interactive anymore.

Environment

• Angular: 18/19
• CDK/Material: 18/19
• Browser(s): all
• Operating System (e.g. Windows, macOS, Ubuntu): windows

[wagnermaciel]

Potential duplicate of #11381

Edit: After investigating, it seems this is unrelated to #11381 and instead seems to be a weird interaction between trackBy and expansion

[passee]

it works when you use
[expansionKey]="expansionKeyFn"
and add an Id to each node
expansionKeyFn = (node: NestedFoodNode) => node.id;

(if no id is provided and you for example use node.name it would expand all nodes with the same name, f.e. "green")

[passee]

You might wanna have a look at my other comment in which I did some debugging with mat flat and nested tree. One of the (working) solutions should also work with CDK tree

[MeMeMax]

Thanks for the infos. Here is an adapted stackblitz with expansionKey set: stackblitz. The tree stays open and interactive, but the data is not updated.

[passee]

@MeMeMax as stated in my other comment:

//doesnt work with nested tree -> no update
//works with flat tree
// trackByFn = (index: number, node: FoodNode) => this.expansionKeyFn(node);
// expansionKeyFn = (node: FoodNode) => node.id;

node.id doesnt work for trackByFn.

update your code to:

  trackBy(_: number, node: any) {
    return node;
  }

[MeMeMax]

@passee sorry, I missed that. Thanks for clarification. You are right. It does work with that setup.

[passee]

No worries, youre welcome.
But this doesnt close the issue I would say, as imo. returning the whole object for trackBy invalidates its purpose, this is just a workaround for being able to work with it.
Any dev should have a look at this and decide if its meant to work like this or if trackBy cant work with the id, in these circumstances, because of a bug.

[MeMeMax]

Yes for me this is still a bug. It is not documented and as you say it invalidates the purpose of trackBy. Also it is a regression so it is likely that the bug was introduced through other changes by accident.