angular / angular/components

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

Open
#30,403 9 comments 1 reaction 0 assignees View on GitHub
area: cdk/tree P2
Dominant language
TypeScript
Stars
25k
Forks
6.8k
Avg merge
1d 8h
Merged PRs (30d)
91

Description

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

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

Contributor guide

Open the contributing guide

Research direction

Start with the linked StackBlitz reproduction and the Angular CDK Tree behavior around its trackBy function and datasource updates. Reproduce the changeTree sequence, then trace the CDK Tree entry points involved in updating the data and preserving interaction state. Done means the tree remains interactive after an update and preserves the open state of unchanged subtrees.

Written by the indexing model from the issue text.

Assessment

Tech stack
angular, typescript
Domain
frontend
Issue type
Bug
Difficulty
3/5
Estimated time
1-2 days
Activity status
Stale
Clarity
Mostly clear
Newbie friendliness
35/100

Get new issues in your inbox

A short digest of beginner-friendly GitHub issues.