fix(cdk/tree): react properly to expansion changes

src/cdk/a11y/key-manager/tree-key-manager.ts

@@ -298,6 +298,12 @@ export class TreeKeyManager<T extends TreeKeyManagerItem> implements TreeKeyMana
     if (newIndex > -1 && newIndex !== this._activeItemIndex) {
       this._activeItemIndex = newIndex;
       this._typeahead?.setCurrentSelectedItemIndex(newIndex);
+    } else if (newIndex === -1) {
+      // if there's no new matching element, then we reset the state of this
+      // key manager
+      this._activeItem = null;
+      this._activeItemIndex = -1;
+      this._hasInitialFocused = false;
     }
   }
 

src/cdk/tree/BUILD.bazel

@@ -39,6 +39,7 @@ ng_test_library(
         "//src/cdk/collections",
         "//src/cdk/keycodes",
         "//src/cdk/testing/testbed",
+        "@npm//@angular/common",
         "@npm//rxjs",
     ],
 )

src/cdk/tree/nested-node.ts

@@ -65,7 +65,7 @@ export class CdkNestedTreeNode<T, K = T>
   }
 
   ngAfterContentInit() {
-    this._dataDiffer = this._differs.find([]).create(this._tree.trackBy);
+    this._dataDiffer = this._differs.find([]).create(this._tree._trackByFn());
     this._tree
       ._getDirectChildren(this.data)
       .pipe(takeUntil(this._destroyed))

src/cdk/tree/tree-using-legacy-key-manager.spec.ts

@@ -1,4 +1,4 @@
-import {Component, ElementRef, QueryList, ViewChild, ViewChildren} from '@angular/core';
+import {Component, QueryList, ViewChildren, ElementRef} from '@angular/core';
 import {ComponentFixture, TestBed} from '@angular/core/testing';
 import {of} from 'rxjs';
 import {CdkTreeModule} from './tree-module';
@@ -9,8 +9,7 @@ describe('CdkTree when provided LegacyTreeKeyManager', () => {
 
   beforeEach(() => {
     TestBed.configureTestingModule({
-      imports: [CdkTreeModule],
-      declarations: [SimpleCdkTreeApp],
+      imports: [SimpleCdkTreeApp],
       providers: [NOOP_TREE_KEY_MANAGER_FACTORY_PROVIDER],
     });
 
@@ -74,20 +73,20 @@ class MinimalTestData {
 
 @Component({
   template: `
-    <cdk-tree #tree [dataSource]="dataSource" [childrenAccessor]="getChildren">
+    <cdk-tree [dataSource]="dataSource" [childrenAccessor]="getChildren">
       <cdk-tree-node #node *cdkTreeNodeDef="let node">
         {{node.name}}
       </cdk-tree-node>
     </cdk-tree>
   `,
-  standalone: false,
+  standalone: true,
+  imports: [CdkTreeModule],
 })
 class SimpleCdkTreeApp {
   isExpandable = (node: MinimalTestData) => node.children.length > 0;
   getChildren = (node: MinimalTestData) => node.children;
 
   dataSource = of([new MinimalTestData('apple'), new MinimalTestData('banana')]);
 
-  @ViewChild('tree', {read: ElementRef}) tree: ElementRef<HTMLElement>;
   @ViewChildren('node') treeNodes: QueryList<ElementRef<HTMLElement>>;
 }

src/cdk/tree/tree-with-tree-control.spec.ts

@@ -28,6 +28,7 @@ import {FlatTreeControl} from './control/flat-tree-control';
 import {NestedTreeControl} from './control/nested-tree-control';
 import {CdkTreeModule, CdkTreeNodePadding} from './index';
 import {CdkTree, CdkTreeNode} from './tree';
+import {NgIf, NgSwitch} from '@angular/common';
 
 describe('CdkTree with TreeControl', () => {
   /** Represents an indent for expectNestedTreeToMatch */
@@ -37,9 +38,9 @@ describe('CdkTree with TreeControl', () => {
   let tree: CdkTree<TestData>;
   let dir: {value: Direction; readonly change: EventEmitter<Direction>};
 
-  function configureCdkTreeTestingModule(declarations: Type<any>[]) {
+  function configureCdkTreeTestingModule(imports: Type<any>[]) {
     TestBed.configureTestingModule({
-      imports: [CdkTreeModule],
+      imports,
       providers: [
         {
           provide: Directionality,
@@ -58,7 +59,6 @@ describe('CdkTree with TreeControl', () => {
           },
         },
       ],
-      declarations: declarations,
     });
   }
 
@@ -216,9 +216,8 @@ describe('CdkTree with TreeControl', () => {
       });
 
       it('should be able to set zero as the indent level', () => {
-        component.paddingNodes.forEach(node => (node.level = 0));
-        fixture.changeDetectorRef.markForCheck();
         fixture.detectChanges();
+        component.paddingNodes.forEach(node => (node.level = 0));
 
         const data = dataSource.data;
 
@@ -532,7 +531,9 @@ describe('CdkTree with TreeControl', () => {
 
         // Add new data
         component.dataSource.data = copiedData;
+        fixture.detectChanges();
         component.dataSource.addData();
+        fixture.detectChanges();
       }
 
       it('should add/remove/move nodes with reference-based trackBy', () => {
@@ -1462,7 +1463,8 @@ function expectNestedTreeToMatch(treeElement: Element, ...expectedTree: any[]) {
       </cdk-tree-node>
     </cdk-tree>
   `,
-  standalone: false,
+  standalone: true,
+  imports: [CdkTreeModule],
 })
 class SimpleCdkTreeApp {
   getLevel = (node: TestData) => node.level;
@@ -1488,7 +1490,8 @@ class SimpleCdkTreeApp {
       </ng-container>
     </cdk-tree>
   `,
-  standalone: false,
+  standalone: true,
+  imports: [CdkTreeModule, NgSwitch],
 })
 class SimpleCdkTreeAppWithIndirectNodes extends SimpleCdkTreeApp {}
 
@@ -1501,7 +1504,8 @@ class SimpleCdkTreeAppWithIndirectNodes extends SimpleCdkTreeApp {}
       </cdk-nested-tree-node>
     </cdk-tree>
   `,
-  standalone: false,
+  standalone: true,
+  imports: [CdkTreeModule],
 })
 class NestedCdkTreeApp {
   getChildren = (node: TestData) => node.observableChildren;
@@ -1525,7 +1529,8 @@ class NestedCdkTreeApp {
       </cdk-nested-tree-node>
     </cdk-tree>
   `,
-  standalone: false,
+  standalone: true,
+  imports: [CdkTreeModule],
 })
 class StaticNestedCdkTreeApp {
   getChildren = (node: TestData) => node.children;
@@ -1562,7 +1567,8 @@ class StaticNestedCdkTreeApp {
       </cdk-nested-tree-node>
     </cdk-tree>
   `,
-  standalone: false,
+  standalone: true,
+  imports: [CdkTreeModule],
 })
 class WhenNodeNestedCdkTreeApp {
   isSecondNode = (_: number, node: TestData) => node.pizzaBase.indexOf('2') > 0;
@@ -1586,7 +1592,8 @@ class WhenNodeNestedCdkTreeApp {
       </cdk-tree-node>
     </cdk-tree>
   `,
-  standalone: false,
+  standalone: true,
+  imports: [CdkTreeModule],
 })
 class CdkTreeAppWithToggle {
   toggleRecursively: boolean = true;
@@ -1613,7 +1620,8 @@ class CdkTreeAppWithToggle {
       </cdk-nested-tree-node>
     </cdk-tree>
   `,
-  standalone: false,
+  standalone: true,
+  imports: [CdkTreeModule, NgIf],
 })
 class NestedCdkTreeAppWithToggle {
   toggleRecursively: boolean = true;
@@ -1643,7 +1651,8 @@ class NestedCdkTreeAppWithToggle {
       </cdk-tree-node>
     </cdk-tree>
   `,
-  standalone: false,
+  standalone: true,
+  imports: [CdkTreeModule],
 })
 class WhenNodeCdkTreeApp {
   isOddNode = (_: number, node: TestData) => node.level % 2 === 1;
@@ -1667,7 +1676,8 @@ class WhenNodeCdkTreeApp {
       </cdk-tree-node>
     </cdk-tree>
   `,
-  standalone: false,
+  standalone: true,
+  imports: [CdkTreeModule],
 })
 class ArrayDataSourceCdkTreeApp {
   getLevel = (node: TestData) => node.level;
@@ -1694,7 +1704,8 @@ class ArrayDataSourceCdkTreeApp {
       </cdk-tree-node>
     </cdk-tree>
   `,
-  standalone: false,
+  standalone: true,
+  imports: [CdkTreeModule],
 })
 class ObservableDataSourceCdkTreeApp {
   getLevel = (node: TestData) => node.level;
@@ -1720,7 +1731,8 @@ class ObservableDataSourceCdkTreeApp {
       </cdk-nested-tree-node>
     </cdk-tree>
   `,
-  standalone: false,
+  standalone: true,
+  imports: [CdkTreeModule],
 })
 class ArrayDataSourceNestedCdkTreeApp {
   getChildren = (node: TestData) => node.observableChildren;
@@ -1745,7 +1757,8 @@ class ArrayDataSourceNestedCdkTreeApp {
       </cdk-nested-tree-node>
     </cdk-tree>
   `,
-  standalone: false,
+  standalone: true,
+  imports: [CdkTreeModule],
 })
 class ObservableDataSourceNestedCdkTreeApp {
   getChildren = (node: TestData) => node.observableChildren;
@@ -1771,7 +1784,8 @@ class ObservableDataSourceNestedCdkTreeApp {
       </cdk-nested-tree-node>
     </cdk-tree>
   `,
-  standalone: false,
+  standalone: true,
+  imports: [CdkTreeModule],
 })
 class DepthNestedCdkTreeApp {
   getChildren = (node: TestData) => node.observableChildren;
@@ -1795,7 +1809,8 @@ class DepthNestedCdkTreeApp {
       </cdk-tree-node>
     </cdk-tree>
   `,
-  standalone: false,
+  standalone: true,
+  imports: [CdkTreeModule],
 })
 class CdkTreeAppWithTrackBy {
   trackByStrategy: 'reference' | 'property' | 'index' = 'reference';
@@ -1829,7 +1844,8 @@ class CdkTreeAppWithTrackBy {
       </cdk-nested-tree-node>
     </cdk-tree>
   `,
-  standalone: false,
+  standalone: true,
+  imports: [CdkTreeModule],
 })
 class NestedCdkTreeAppWithTrackBy {
   trackByStrategy: 'reference' | 'property' | 'index' = 'reference';