add blur()

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

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>

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,