angular / angular/components

Use of custom TrackByFunction in MatTree does not preserve expansion state when nodes change

Open
#15,872 8 comments 17 reactions 0 assignees View on GitHub
area: material/tree G P2
Dominant language
TypeScript
Stars
25k
Forks
6.8k
Avg merge
1d 8h
Merged PRs (30d)
91

Description

#### What is the expected behavior?

Use of trackBy should also ensure that the expansion state does not get lost when nodes are updated.

#### What is the current behavior?

Use of trackBy does not ensure that the expansion state does not get lost when nodes are updated. This is presumably since TreeControl uses an expansionModel which is a SelectionModel where the SelectionModel has no awareness of the TrackByFunction.

#### What are the steps to reproduce?

Relying upon the TreeControl expansionModel:
https://stackblitz.com/edit/angular-5wpr9o-kjnmsn?file=app%2Ftree-flat-overview-example.ts

#### Which versions of Angular, Material, OS, TypeScript, browsers are affected?

all

#### Is there anything else we should know?

Trying to store expansion state in the nodes themselves as a workaround doesn't work (unless you transfer the state):
https://stackblitz.com/edit/angular-5wpr9o-ahptjs?file=app%2Ftree-flat-overview-example.ts

Having a custom expansionModel that is aware of the trackBy state works to preserve state, since the TreeControl's expansion-related methods apparently aren't actually used internally by the tree component:
https://stackblitz.com/edit/angular-5wpr9o-pbmk1g?file=app%2Ftree-flat-overview-example.ts

Contributor guide

Open the contributing guide

Research direction

Start with the linked StackBlitz reproductions, especially app/tree-flat-overview-example.ts, and inspect how MatTree, TreeControl, TrackByFunction, and the expansionModel interact. Reproduce the lost expansion state when nodes are updated with a custom trackBy. Done means expansion state remains preserved after those updates.

Written by the indexing model from the issue text.

Assessment

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

Get new issues in your inbox

A short digest of beginner-friendly GitHub issues.