From a7b56a49f041e4134b8e39ed6a614eb313f4e26d Mon Sep 17 00:00:00 2001 From: Cassandra Choi Date: Fri, 9 Aug 2024 19:09:47 +0000 Subject: [PATCH 1/3] fix(cdk/tree): fix issue where `isExpanded` wouldn't be set if placed before `isExpandable` --- src/cdk/tree/tree.spec.ts | 39 ++++++++++++++++++++++++++++++++++++++- src/cdk/tree/tree.ts | 10 ++++++++++ 2 files changed, 48 insertions(+), 1 deletion(-) diff --git a/src/cdk/tree/tree.spec.ts b/src/cdk/tree/tree.spec.ts index ccde2b218e8c..623cc042d544 100644 --- a/src/cdk/tree/tree.spec.ts +++ b/src/cdk/tree/tree.spec.ts @@ -1448,6 +1448,17 @@ describe('CdkTree', () => { }); }); }); + + it('sets a node as expanded if attribute is ordered before `isExpandable`', () => { + configureCdkTreeTestingModule([IsExpandableOrderingTest]); + const fixture = TestBed.createComponent(IsExpandableOrderingTest); + fixture.detectChanges(); + + const component = fixture.componentInstance; + expect(getExpandedNodes(component.dataSource, component.tree).length) + .withContext(`expect an expanded node`) + .toBe(1); + }); }); export class TestData { @@ -1554,7 +1565,7 @@ function getNodes(treeElement: Element): HTMLElement[] { return Array.from(treeElement.querySelectorAll('.cdk-tree-node')); } -function getExpandedNodes(nodes: TestData[] | undefined, tree: CdkTree): TestData[] { +function getExpandedNodes(nodes: T[] | undefined, tree: CdkTree): T[] { return nodes?.filter(node => tree.isExpanded(node)) ?? []; } @@ -2100,3 +2111,29 @@ class FlatTreeWithThreeNodes { @ViewChild('tree', {read: ElementRef}) tree: ElementRef; @ViewChildren('node') treeNodes: QueryList>; } + +@Component({ + template: ` + + + {{node.pizzaTopping}} - {{node.pizzaCheese}} + {{node.pizzaBase}} + + + `, +}) +class IsExpandableOrderingTest { + getChildren = (node: MinimalTestData) => this.children; + + @ViewChild(CdkTree) tree: CdkTree; + + dataSource = [ + new MinimalTestData('parent'), + ]; + + children = [ + new MinimalTestData('child'), + ] +} diff --git a/src/cdk/tree/tree.ts b/src/cdk/tree/tree.ts index 5ecc6f4872cf..e945bae1a9b8 100644 --- a/src/cdk/tree/tree.ts +++ b/src/cdk/tree/tree.ts @@ -1176,6 +1176,16 @@ export class CdkTreeNode implements OnDestroy, OnInit, TreeKeyManagerI } set isExpandable(isExpandable: boolean) { this._inputIsExpandable = isExpandable; + if (!isExpandable) { + return; + } + // If the node is being set to expandable, ensure that the status of the + // node is propagated + if (this.isExpanded) { + this.expand(); + } else { + this.collapse(); + } } @Input() From 466f8b616d42a1fc83877ac93844b4e7b3b2c1b8 Mon Sep 17 00:00:00 2001 From: Cassandra Choi Date: Fri, 9 Aug 2024 20:25:52 +0000 Subject: [PATCH 2/3] fix(cdk/tree): actually fix the issue --- src/cdk/tree/tree.spec.ts | 18 ++++++++++-------- src/cdk/tree/tree.ts | 8 +++++--- 2 files changed, 15 insertions(+), 11 deletions(-) diff --git a/src/cdk/tree/tree.spec.ts b/src/cdk/tree/tree.spec.ts index 623cc042d544..92d4356e0cf4 100644 --- a/src/cdk/tree/tree.spec.ts +++ b/src/cdk/tree/tree.spec.ts @@ -2119,21 +2119,23 @@ class FlatTreeWithThreeNodes { *cdkTreeNodeDef="let node" [isExpanded]="true" [isExpandable]="true"> - {{node.pizzaTopping}} - {{node.pizzaCheese}} + {{node.pizzaBase}} + {{node.name}} `, }) class IsExpandableOrderingTest { - getChildren = (node: MinimalTestData) => this.children; + getChildren = (node: MinimalTestData) => node.children; @ViewChild(CdkTree) tree: CdkTree; - dataSource = [ - new MinimalTestData('parent'), - ]; + dataSource: MinimalTestData[]; - children = [ - new MinimalTestData('child'), - ] + constructor() { + const children = [new MinimalTestData('child')]; + const data = [new MinimalTestData('parent')]; + data[0].children = children; + + this.dataSource = data; + } } diff --git a/src/cdk/tree/tree.ts b/src/cdk/tree/tree.ts index e945bae1a9b8..df61c6c2c168 100644 --- a/src/cdk/tree/tree.ts +++ b/src/cdk/tree/tree.ts @@ -1176,14 +1176,14 @@ export class CdkTreeNode implements OnDestroy, OnInit, TreeKeyManagerI } set isExpandable(isExpandable: boolean) { this._inputIsExpandable = isExpandable; - if (!isExpandable) { + if (!this.isExpandable) { return; } // If the node is being set to expandable, ensure that the status of the // node is propagated - if (this.isExpanded) { + if (this._inputIsExpanded) { this.expand(); - } else { + } else if (this._inputIsExpanded === false) { this.collapse(); } } @@ -1193,6 +1193,7 @@ export class CdkTreeNode implements OnDestroy, OnInit, TreeKeyManagerI return this._tree.isExpanded(this._data); } set isExpanded(isExpanded: boolean) { + this._inputIsExpanded = isExpanded; if (isExpanded) { this.expand(); } else { @@ -1237,6 +1238,7 @@ export class CdkTreeNode implements OnDestroy, OnInit, TreeKeyManagerI readonly _dataChanges = new Subject(); private _inputIsExpandable: boolean = false; + private _inputIsExpanded: boolean | undefined = undefined; /** * Flag used to determine whether or not we should be focusing the actual element based on * some user interaction (click or focus). On click, we don't forcibly focus the element From db1194891ca77f2d33c0ebecdc83dbc96a98ac09 Mon Sep 17 00:00:00 2001 From: Cassandra Choi Date: Fri, 9 Aug 2024 20:54:47 +0000 Subject: [PATCH 3/3] fix(cdk/tree): actually actually fix tests --- src/cdk/tree/tree.ts | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/src/cdk/tree/tree.ts b/src/cdk/tree/tree.ts index df61c6c2c168..9e1bd40e04f7 100644 --- a/src/cdk/tree/tree.ts +++ b/src/cdk/tree/tree.ts @@ -1176,7 +1176,7 @@ export class CdkTreeNode implements OnDestroy, OnInit, TreeKeyManagerI } set isExpandable(isExpandable: boolean) { this._inputIsExpandable = isExpandable; - if (!this.isExpandable) { + if ((this.data && !this._isExpandable) || !this._inputIsExpandable) { return; } // If the node is being set to expandable, ensure that the status of the