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

Fixes that none of the tree nodes were focusable if the data is swapped out after initialization.

Fixes angular#32779.

Author: crisbeto

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));

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();

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;
     }