Make sure <sl-select> closes when focusing out

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

src/components/select/select.component.ts

@@ -216,15 +216,23 @@ 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();
+    const root = document;
+    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() {

src/components/select/select.test.ts

@@ -580,6 +580,33 @@ describe('<sl-select>', () => {
     expect(afterHideHandler).to.have.been.calledOnce;
   });
 
+  it('should close when focus leaves the control', async () => {
+    const el = await fixture(html`
+      <div>
+        <sl-select value="option-1">
+          <sl-option value="option-1">Option 1</sl-option>
+          <sl-option value="option-2">Option 2</sl-option>
+          <sl-option value="option-3">Option 3</sl-option>
+        </sl-select>
+        <input />
+      </div>
+    `);
+    const select = el.querySelector('sl-select')!;
+    const input = el.querySelector('input')!;
+
+    await clickOnElement(select);
+    await select.updateComplete;
+    expect(select.open).to.be.true;
+
+    select.focus();
+    await aTimeout(500);
+    await sendKeys({ press: 'Tab' });
+    await select.updateComplete;
+
+    expect(select.open).to.be.false;
+    expect(document.activeElement).to.equal(input);
+  });
+
   it('should have rounded tags when using the pill attribute', async () => {
     const el = await fixture<SlSelect>(html`
       <sl-select value="option-1 option-2" multiple pill>