angular / angular/components

bug(MatTree): padding is not recomputed when moving a node inside/outside an expandable node

Offen
#29,959 6 Kommentare 1 Reaktion 0 zugewiesene Personen Auf GitHub ansehen
area: cdk/tree area: material/tree P2
Vorherrschende Sprache
TypeScript
Sterne
25k
Forks
6.8k
Ø Merge
1 T. 8 Std.
Gemergte PRs (30 T.)
91

Beschreibung

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

As `TreeControl` is deprecated, I started migrating to the latest API using `childrenAccessor`. So far so good, except for one case not working any more.

I'm using `matTreeNodePadding` and `matTreeNodePaddingIndent` on ``. When I move a node inside/outside of an expandable node, padding is not recomputed as-is.

Expanding/collapsing the parent node in which the node was moved, will recompute its padding though.

### Reproduction

Minimal example on [Stackblitz](https://stackblitz.com/~/github.com/poirierlouis/ng-issue-29959).

Steps to reproduce:
1. Open link
2. Open preview in a new tab
3. Open both folders (`/` and `home`)
4. Follow instructions to move a node outside its parent node

`dataSource` is updated with a new array, using the same items. Can it be a source of error? Should the entire tree be cloned somehow, to trigger changes detection down to padding computation?

### Expected Behavior

When a node is moved inside/outside of an expandable node (level is changed), padding should be recomputed based on the new level of the node.

### Actual Behavior

Padding of the node is not updated when moving the node inside/outside of an expandable node.

### Environment

- Angular: 18.2.10
- CDK/Material: 18.2.11
- Browser(s): Firefox / Chrome
- Operating System (e.g. Windows, macOS, Ubuntu): Windows

Beitragsleitfaden

Beitragsleitfaden öffnen

Rechercherichtung

Beginne mit der verknüpften StackBlitz-Reproduktion und untersuche das Verhalten von matTreeNodePadding bei der Verwendung von childrenAccessor und dem Verschieben eines Knotens zwischen erweiterbaren Elternknoten. Verfolge, wie sich die Knotenebene ändert und wie das Padding neu berechnet wird, und überprüfe anschließend, dass das Verschieben des Knotens sein Padding aktualisiert, ohne den Elternknoten zu erweitern oder zu reduzieren.

Vom Indexierungsmodell aus dem Issue-Text verfasst.

Bewertung

Tech-Stack
angular, typescript
Bereich
frontend
Issue-Typ
Bug
Schwierigkeit
3/5
Geschätzter Aufwand
1-2 Tage
Aktivitätsstatus
Veraltet
Klarheit
Größtenteils klar
Anfängerfreundlichkeit
48/100

Neue Issues direkt in Ihr Postfach

Eine kurze Übersicht über anfängerfreundliche GitHub-Issues.