From cf543ef335434fc9126505591499df344e9c9e3c Mon Sep 17 00:00:00 2001
From: Cory LaViska <cory@abeautifulsite.net>
Date: Fri, 11 Aug 2023 08:25:46 -0700
Subject: [PATCH] don't hijack key presses in text fields; fixes #1492 (#1504)

---
 docs/pages/resources/changelog.md     | 1 +
 src/components/tree/tree.component.ts | 7 +++++++
 2 files changed, 8 insertions(+)

diff --git a/docs/pages/resources/changelog.md b/docs/pages/resources/changelog.md
index d5550563e8..0cc37d33ae 100644
--- a/docs/pages/resources/changelog.md
+++ b/docs/pages/resources/changelog.md
@@ -16,6 +16,7 @@ New versions of Shoelace are released as-needed and generally occur when a criti
 
 - Added the `<sl-copy-button>` component [#1473]
 - Fixed a bug in `<sl-dropdown>` where pressing [[Up]] or [[Down]] when focused on the trigger wouldn't focus the first/last menu items [#1472]
+- Fixed a bug that caused key presses in text fields to be hijacked when used inside `<sl-tree>` [#1492]
 - Improved the behavior of the clear button in `<sl-input>` to prevent the component's width from shifting when toggled [#1496]
 - Improved `<sl-tooltip>` to prevent user selection so the tooltip doesn't get highlighted when dragging selections
 - Removed `sideEffects` key from `package.json`. Update React docs to use cherry-picking. [#1485]
diff --git a/src/components/tree/tree.component.ts b/src/components/tree/tree.component.ts
index 245a7f7b8b..0efaf8ee9a 100644
--- a/src/components/tree/tree.component.ts
+++ b/src/components/tree/tree.component.ts
@@ -222,10 +222,17 @@ export default class SlTree extends ShoelaceElement {
   }
 
   private handleKeyDown(event: KeyboardEvent) {
+    // Ignore key presses we aren't interested in
     if (!['ArrowDown', 'ArrowUp', 'ArrowRight', 'ArrowLeft', 'Home', 'End', 'Enter', ' '].includes(event.key)) {
       return;
     }
 
+    // Ignore key presses when focus is inside a text field. This prevents the component from hijacking nested form
+    // controls that exist inside tree items.
+    if (event.composedPath().some((el: HTMLElement) => ['input', 'textarea'].includes(el?.tagName?.toLowerCase()))) {
+      return;
+    }
+
     const items = this.getFocusableItems();
     const isLtr = this.localize.dir() === 'ltr';
     const isRtl = this.localize.dir() === 'rtl';