From e2012433cb94a6740a5c6cb8cf144bcb37c5410c Mon Sep 17 00:00:00 2001
From: Cory LaViska <cory@abeautifulsite.net>
Date: Fri, 17 Dec 2021 09:27:23 -0500
Subject: [PATCH] add blur()

---
 docs/resources/changelog.md          |  1 +
 src/components/select/select.test.ts |  2 +-
 src/components/select/select.ts      | 10 +++++++---
 3 files changed, 9 insertions(+), 4 deletions(-)

diff --git a/docs/resources/changelog.md b/docs/resources/changelog.md
index 4223d1974..1fb37ea3e 100644
--- a/docs/resources/changelog.md
+++ b/docs/resources/changelog.md
@@ -10,6 +10,7 @@ _During the beta period, these restrictions may be relaxed in the event of a mis
 
 - 🚨 BREAKING: changed the `type` attribute to `variant` in `<sl-alert>`, `<sl-badge>`, `<sl-button>`, and `<sl-tag>` since it's more appropriate and to disambiguate from other `type` attributes
 - 🚨 BREAKING: removed `base` part from `<sl-divider>` to simplify the styling API
+- Added `focus()` and `blur()` methods to `<sl-select>` [#625](https://github.com/shoelace-style/shoelace/pull/625)
 - Fixed bug where setting `tooltipFormatter` on `<sl-range>` in JSX causes React@experimental to error out
 - Refactored `<sl-button>` to use Lit's static expressions to reduce code
 - Simplified `<sl-spinner>` animation
diff --git a/src/components/select/select.test.ts b/src/components/select/select.test.ts
index 59904a8a7..5bf60c6a8 100644
--- a/src/components/select/select.test.ts
+++ b/src/components/select/select.test.ts
@@ -22,7 +22,7 @@ describe('<sl-select>', () => {
     expect(changeHandler).to.have.been.calledOnce;
   });
 
-  it('should  open the menu when any letter key is pressed with sl-select is on focus', async () => {
+  it('should open the menu when any letter key is pressed with sl-select is on focus', async () => {
     const el = (await fixture(html`
       <sl-select>
         <sl-menu-item value="option-1">Option 1</sl-menu-item>
diff --git a/src/components/select/select.ts b/src/components/select/select.ts
index 11c365ab5..5e6bb381b 100644
--- a/src/components/select/select.ts
+++ b/src/components/select/select.ts
@@ -181,8 +181,12 @@ export default class SlSelect extends LitElement {
 
   /** Sets focus on the control. */
   focus(options?: FocusOptions) {
-    const box = this.shadowRoot?.querySelector('.select__control') as HTMLElement;
-    box.focus(options);
+    this.control.focus(options);
+  }
+
+  /** Removes focus from the control. */
+  blur() {
+    this.control.blur();
   }
 
   handleBlur() {
@@ -452,7 +456,7 @@ export default class SlSelect extends LitElement {
           part="base"
           .hoist=${this.hoist}
           .stayOpenOnSelect=${this.multiple}
-          .containingElement=${this}
+          .containingElement=${this as HTMLElement}
           ?disabled=${this.disabled}
           class=${classMap({
             select: true,