fix(cdk/tree): only handle keyboard events directly from the node

Currently the CDK tree handle any keyboard event coming from a descendant. This problematic if there are interactive elements like inputs inside the tree, because their default behavior will be prevented.

This change switches to only handling events coming either directly from the tree or directly from a tree node.

Fixes angular#29828.

src/cdk/tree/tree.spec.ts

@@ -380,6 +380,28 @@ describe('CdkTree', () => {
           .withContext(`Expect node collapsed`)
           .toBe(0);
       });
+
+      it('should not handle events coming from a descendant of a node', () => {
+        expect(dataSource.data.length).toBe(3);
+
+        expect(getExpandedNodes(component.dataSource?.getRecursiveData(), component.tree).length)
+          .withContext('Expect no expanded node on init')
+          .toBe(0);
+
+        const node = getNodes(treeElement)[2] as HTMLElement;
+        const input = document.createElement('input');
+        node.appendChild(input);
+
+        const event = createKeyboardEvent('keydown', undefined, 'ArrowRight');
+        spyOn(event, 'preventDefault').and.callThrough();
+        input.dispatchEvent(event);
+        fixture.detectChanges();
+
+        expect(getExpandedNodes(component.dataSource?.getRecursiveData(), component.tree).length)
+          .withContext('Expect no expanded node after event')
+          .toBe(0);
+        expect(event.preventDefault).not.toHaveBeenCalled();
+      });
     });
 
     describe('with when node template', () => {

src/cdk/tree/tree.ts

@@ -127,6 +127,7 @@ export class CdkTree<T, K = T>
 {
   private _differs = inject(IterableDiffers);
   private _changeDetectorRef = inject(ChangeDetectorRef);
+  private _elementRef = inject(ElementRef);
 
   private _dir = inject(Directionality);
 
@@ -890,8 +891,20 @@ export class CdkTree<T, K = T>
   }
 
   /** `keydown` event handler; this just passes the event to the `TreeKeyManager`. */
-  _sendKeydownToKeyManager(event: KeyboardEvent) {
-    this._keyManager.onKeydown(event);
+  protected _sendKeydownToKeyManager(event: KeyboardEvent): void {
+    // Only handle events directly on the tree or directly on one of the nodes, otherwise
+    // we risk interfering with events in the projected content (see #29828).
+    if (event.target === this._elementRef.nativeElement) {
+      this._keyManager.onKeydown(event);
+    } else {
+      const nodes = this._nodes.getValue();
+      for (const [, node] of nodes) {
+        if (event.target === node._elementRef.nativeElement) {
+          this._keyManager.onKeydown(event);
+          break;
+        }
+      }
+    }
   }
 
   /** Gets all nested descendants of a given node. */
@@ -1155,7 +1168,7 @@ export class CdkTree<T, K = T>
   standalone: true,
 })
 export class CdkTreeNode<T, K = T> implements OnDestroy, OnInit, TreeKeyManagerItem {
-  protected _elementRef = inject<ElementRef<HTMLElement>>(ElementRef);
+  _elementRef = inject<ElementRef<HTMLElement>>(ElementRef);
   protected _tree = inject<CdkTree<T, K>>(CdkTree);
   protected _tabindex: number | null = -1;
 

tools/public_api_guard/cdk/tree.md

@@ -117,7 +117,7 @@ export class CdkTree<T, K = T> implements AfterContentChecked, AfterContentInit,
     _nodeOutlet: CdkTreeNodeOutlet;
     _registerNode(node: CdkTreeNode<T, K>): void;
     renderNodeChanges(data: readonly T[], dataDiffer?: IterableDiffer<T>, viewContainer?: ViewContainerRef, parentData?: T): void;
-    _sendKeydownToKeyManager(event: KeyboardEvent): void;
+    protected _sendKeydownToKeyManager(event: KeyboardEvent): void;
     _setNodeTypeIfUnset(nodeType: 'flat' | 'nested'): void;
     toggle(dataNode: T): void;
     toggleDescendants(dataNode: T): void;
@@ -158,7 +158,7 @@ export class CdkTreeNode<T, K = T> implements OnDestroy, OnInit, TreeKeyManagerI
     readonly _dataChanges: Subject<void>;
     protected readonly _destroyed: Subject<void>;
     // (undocumented)
-    protected _elementRef: ElementRef<HTMLElement>;
+    _elementRef: ElementRef<HTMLElement>;
     // (undocumented)
     _emitExpansionState(expanded: boolean): void;
     expand(): void;