From b7eccb1bffe02f1f4a1b5aedf656f934e3b4a7ff Mon Sep 17 00:00:00 2001
From: Cory LaViska <cory@abeautifulsite.net>
Date: Wed, 6 Dec 2023 11:58:49 -0500
Subject: [PATCH] Make sure `<sl-select>` closes when focusing out (#1764)
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

* fixes #1763

* fix comment

* 🤷🏻‍♂️

* whatever wtr
---
 docs/pages/resources/changelog.md         |  1 +
 src/components/select/select.component.ts | 19 +++++++++++++------
 src/components/select/select.test.ts      |  1 +
 3 files changed, 15 insertions(+), 6 deletions(-)

diff --git a/docs/pages/resources/changelog.md b/docs/pages/resources/changelog.md
index ad6ae558..ac23bafa 100644
--- a/docs/pages/resources/changelog.md
+++ b/docs/pages/resources/changelog.md
@@ -18,6 +18,7 @@ New versions of Shoelace are released as-needed and generally occur when a criti
 - Fixed more performance issues with focus trapping performance. [#1750]
 - Added the `hover-bridge` feature to `<sl-popup>` to support better tooltip accessibility [#1734]
 - Fixed a bug in `<sl-input>` and `<sl-textarea>` that made it work differently from `<input>` and `<textarea>` when using defaults [#1746]
+- Fixed a bug in `<sl-select>` that prevented it from closing when tabbing to another select inside a shadow root [#1763]
 - Improved the accessibility of `<sl-tooltip>` so they persist when hovering over the tooltip and dismiss when pressing [[Esc]] [#1734]
 
 ## 2.12.0
diff --git a/src/components/select/select.component.ts b/src/components/select/select.component.ts
index b8a01102..14c830d3 100644
--- a/src/components/select/select.component.ts
+++ b/src/components/select/select.component.ts
@@ -216,15 +216,22 @@ export default class SlSelect extends ShoelaceElement implements ShoelaceFormCon
   }
 
   private addOpenListeners() {
-    document.addEventListener('focusin', this.handleDocumentFocusIn);
-    document.addEventListener('keydown', this.handleDocumentKeyDown);
-    document.addEventListener('mousedown', this.handleDocumentMouseDown);
+    //
+    // Listen on the root node instead of the document in case the elements are inside a shadow root
+    //
+    // https://github.com/shoelace-style/shoelace/issues/1763
+    //
+    const root = this.getRootNode();
+    root.addEventListener('focusin', this.handleDocumentFocusIn);
+    root.addEventListener('keydown', this.handleDocumentKeyDown);
+    root.addEventListener('mousedown', this.handleDocumentMouseDown);
   }
 
   private removeOpenListeners() {
-    document.removeEventListener('focusin', this.handleDocumentFocusIn);
-    document.removeEventListener('keydown', this.handleDocumentKeyDown);
-    document.removeEventListener('mousedown', this.handleDocumentMouseDown);
+    const root = this.getRootNode();
+    root.removeEventListener('focusin', this.handleDocumentFocusIn);
+    root.removeEventListener('keydown', this.handleDocumentKeyDown);
+    root.removeEventListener('mousedown', this.handleDocumentMouseDown);
   }
 
   private handleFocus() {
diff --git a/src/components/select/select.test.ts b/src/components/select/select.test.ts
index acd4ea35..0f80a7e6 100644
--- a/src/components/select/select.test.ts
+++ b/src/components/select/select.test.ts
@@ -156,6 +156,7 @@ describe('<sl-select>', () => {
       await el.updateComplete;
       await sendKeys({ press: 'ArrowDown' }); // move selection to the third option
       await el.updateComplete;
+      el.focus(); // For some reason, the browser loses focus before we press enter. Refocus the select.
       await sendKeys({ press: 'Enter' }); // commit the selection
       await el.updateComplete;