From 4f8417806c9b03da2eef726836f0e17e436c0e6b Mon Sep 17 00:00:00 2001
From: Cory LaViska <cory@abeautifulsite.net>
Date: Wed, 6 Dec 2023 12:02:20 -0500
Subject: [PATCH] backport 1764

---
 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 37c63a4b6..a9fc72a0d 100644
--- a/docs/pages/resources/changelog.md
+++ b/docs/pages/resources/changelog.md
@@ -24,6 +24,7 @@ New versions of Web Awesome are released as-needed and generally occur when a cr
 
 - 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 e5bbf329a..89643b914 100644
--- a/src/components/select/select.component.ts
+++ b/src/components/select/select.component.ts
@@ -223,15 +223,22 @@ export default class WaSelect extends WebAwesomeElement implements WebAwesomeFor
   }
 
   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 82cdfe4d2..159631546 100644
--- a/src/components/select/select.test.ts
+++ b/src/components/select/select.test.ts
@@ -156,6 +156,7 @@ describe('<wa-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;