fix(cdk/tree): no nodes focusable if data is replaced (#32781)

crisbeto · crisbeto · commit c825fa208d03 · 2026-02-17T19:59:22.000+01:00
Fixes that none of the tree nodes were focusable if the data is swapped out after initialization. Fixes #32779. (cherry picked from commit b15b48d)
diff --git a/src/cdk/a11y/key-manager/tree-key-manager.ts b/src/cdk/a11y/key-manager/tree-key-manager.ts
@@ -102,19 +102,9 @@ export class TreeKeyManager<T extends TreeKeyManagerItem> implements TreeKeyMana
     // items aren't being collected via `ViewChildren` or `ContentChildren`).
     if (items instanceof QueryList) {
       this._items = items.toArray();
-      items.changes.subscribe((newItems: QueryList<T>) => {
-        this._items = newItems.toArray();
-        this._typeahead?.setItems(this._items);
-        this._updateActiveItemIndex(this._items);
-        this._initializeFocus();
-      });
+      items.changes.subscribe((newItems: QueryList<T>) => this._itemsChanged(newItems.toArray()));
     } else if (isObservable(items)) {
-      items.subscribe(newItems => {
-        this._items = newItems;
-        this._typeahead?.setItems(newItems);
-        this._updateActiveItemIndex(newItems);
-        this._initializeFocus();
-      });
+      items.subscribe(newItems => this._itemsChanged(newItems));
     } else {
       this._items = items;
       this._initializeFocus();
@@ -219,6 +209,19 @@ export class TreeKeyManager<T extends TreeKeyManagerItem> implements TreeKeyMana
     return this._activeItem;
   }
 
+  /** Called when the list of items has changed. */
+  private _itemsChanged(newItems: T[]) {
+    if (this._hasInitialFocused && this._activeItem && !newItems.includes(this._activeItem)) {
+      this._activeItem = null;
+      this._hasInitialFocused = false;
+    }
+
+    this._items = newItems;
+    this._typeahead?.setItems(this._items);
+    this._updateActiveItemIndex(this._items);
+    this._initializeFocus();
+  }
+
   /** Focus the first available item. */
   private _focusFirstItem(): void {
     this.focusItem(this._findNextAvailableItemIndex(-1));
diff --git a/src/cdk/tree/tree.spec.ts b/src/cdk/tree/tree.spec.ts
@@ -1281,6 +1281,16 @@ describe('CdkTree', () => {
         expect(nodes.map(x => x.getAttribute('tabindex')).join(', ')).toEqual('0, -1, -1');
       });
 
+      it('should ensure that at least one item is focusable when the items are swapped out', () => {
+        expect(nodes.map(x => x.getAttribute('tabindex')).join(', ')).toEqual('0, -1, -1');
+
+        dataSource.data = [new TestData('foo'), new TestData('bar'), new TestData('baz')];
+        fixture.detectChanges();
+        nodes = getNodes(treeElement);
+
+        expect(nodes.map(x => x.getAttribute('tabindex')).join(', ')).toEqual('0, -1, -1');
+      });
+
       it('maintains tabindex when component is blurred', () => {
         // activate the second child by clicking on it
         nodes[1].click();
diff --git a/src/material/tree/node.ts b/src/material/tree/node.ts
@@ -84,7 +84,7 @@ export class MatTreeNode<T, K = T> extends CdkTreeNode<T, K> implements OnInit,
    */
   defaultTabIndex = 0;
 
-  protected _getTabindexAttribute() {
+  protected _getTabindexAttribute(): number | null {
     if (isNoopTreeKeyManager(this._tree._keyManager)) {
       return this.tabIndexInputBinding;
     }

Original file line number	Diff line number	Diff line change
`@@ -84,7 +84,7 @@ export class MatTreeNode<T, K = T> extends CdkTreeNode<T, K> implements OnInit,`
`84`	`84`	`*/`
`85`	`85`	`defaultTabIndex = 0;`
`86`	`86`
`87`		`- protected _getTabindexAttribute() {`
	`87`	`+ protected _getTabindexAttribute(): number \| null {`
`88`	`88`	`if (isNoopTreeKeyManager(this._tree._keyManager)) {`
`89`	`89`	`return this.tabIndexInputBinding;`
`90`	`90`	`}`