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

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;