add blur()

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,