fixes #456

docs/resources/changelog.md

@@ -9,6 +9,7 @@ _During the beta period, these restrictions may be relaxed in the event of a mis
 ## Next
 
 - Fixed a bug in `sl-dropdown` where a `keydown` listener wasn't cleaned up properly
+- Fixed a bug in `sl-select` where `sl-blur` was emitted prematurely [#456](https://github.com/shoelace-style/shoelace/issues/456)
 - Fixed a bug in `sl-select` where no selection with `multiple` resulted in an incorrect value [#457](https://github.com/shoelace-style/shoelace/issues/457)
 - Fixed a bug in `sl-select` where `sl-change` was emitted immediately after connecting to the DOM [#458](https://github.com/shoelace-style/shoelace/issues/458)
 

src/components/dropdown/dropdown.scss

@@ -29,6 +29,11 @@
   box-shadow: var(--sl-shadow-large);
   overflow: auto;
   overscroll-behavior: none;
+  pointer-events: none;
+}
+
+.dropdown--open .dropdown__panel {
+  pointer-events: all;
 }
 
 .dropdown__positioner {

src/components/select/select.scss

@@ -35,7 +35,7 @@
   color: var(--sl-input-color-hover);
 }
 
-.select:not(.select--disabled) .select__box:focus {
+.select.select--focused:not(.select--disabled) .select__box {
   background-color: var(--sl-input-background-color-focus);
   border-color: var(--sl-input-border-color-focus);
   box-shadow: var(--focus-ring);

src/components/select/select.ts

@@ -45,6 +45,7 @@ export default class SlSelect extends LitElement {
   static styles = unsafeCSS(styles);
 
   @query('.select') dropdown: SlDropdown;
+  @query('.select__box') box: SlDropdown;
   @query('.select__hidden-select') input: HTMLInputElement;
   @query('.select__menu') menu: SlMenu;
 
@@ -170,8 +171,11 @@ export default class SlSelect extends LitElement {
   }
 
   handleBlur() {
-    this.hasFocus = false;
-    this.slBlur.emit();
+    // Don't blur if the control is open. We'll move focus back once it closes.
+    if (!this.isOpen) {
+      this.hasFocus = false;
+      this.slBlur.emit();
+    }
   }
 
   handleClearClick(event: MouseEvent) {
@@ -189,8 +193,10 @@ export default class SlSelect extends LitElement {
   }
 
   handleFocus() {
-    this.hasFocus = true;
-    this.slFocus.emit();
+    if (!this.hasFocus) {
+      this.hasFocus = true;
+      this.slFocus.emit();
+    }
   }
 
   handleKeyDown(event: KeyboardEvent) {
@@ -268,6 +274,9 @@ export default class SlSelect extends LitElement {
 
   handleMenuHide() {
     this.isOpen = false;
+
+    // Restore focus on the box after the menu is hidden
+    this.box.focus();
   }
 
   @watch('multiple')