From 5d1bc764302e4bebcc50fb0fa3dee86470148cdf Mon Sep 17 00:00:00 2001
From: Kristiyan Kostadinov <crisbeto@abv.bg>
Date: Fri, 11 Oct 2024 10:17:48 +0200
Subject: [PATCH] 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 #29828.
---
 src/cdk/tree/tree.spec.ts          | 22 ++++++++++++++++++++++
 src/cdk/tree/tree.ts               | 19 ++++++++++++++++---
 tools/public_api_guard/cdk/tree.md |  4 ++--
 3 files changed, 40 insertions(+), 5 deletions(-)

diff --git a/src/cdk/tree/tree.spec.ts b/src/cdk/tree/tree.spec.ts
index 92d4356e0cf4..c71312c00815 100644
--- a/src/cdk/tree/tree.spec.ts
+++ b/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', () => {
diff --git a/src/cdk/tree/tree.ts b/src/cdk/tree/tree.ts
index 9d52bc521ffd..1e23605f8fb7 100644
--- a/src/cdk/tree/tree.ts
+++ b/src/cdk/tree/tree.ts
@@ -125,6 +125,7 @@ export class CdkTree<T, K = T>
     OnDestroy,
     OnInit
 {
+  private _elementRef = inject(ElementRef);
   private _dir = inject(Directionality);
 
   /** Subject that emits when the component has been destroyed. */
@@ -889,8 +890,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. */
@@ -1341,7 +1354,7 @@ export class CdkTreeNode<T, K = T> implements OnDestroy, OnInit, TreeKeyManagerI
   private _changeDetectorRef = inject(ChangeDetectorRef);
 
   constructor(
-    protected _elementRef: ElementRef<HTMLElement>,
+    public _elementRef: ElementRef<HTMLElement>,
     protected _tree: CdkTree<T, K>,
   ) {
     CdkTreeNode.mostRecentTreeNode = this as CdkTreeNode<T, K>;
diff --git a/tools/public_api_guard/cdk/tree.md b/tools/public_api_guard/cdk/tree.md
index 73c45c1929a7..e808bc335cd9 100644
--- a/tools/public_api_guard/cdk/tree.md
+++ b/tools/public_api_guard/cdk/tree.md
@@ -119,7 +119,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;
@@ -160,7 +160,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;