diff --git a/docs/resources/changelog.md b/docs/resources/changelog.md index 8257b2446..a44b96fd6 100644 --- a/docs/resources/changelog.md +++ b/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) diff --git a/src/components/dropdown/dropdown.scss b/src/components/dropdown/dropdown.scss index 389d5e163..a7f31678c 100644 --- a/src/components/dropdown/dropdown.scss +++ b/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 { diff --git a/src/components/select/select.scss b/src/components/select/select.scss index 9418bec68..178aa8e0f 100644 --- a/src/components/select/select.scss +++ b/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); diff --git a/src/components/select/select.ts b/src/components/select/select.ts index b838bd8e0..19a02f0df 100644 --- a/src/components/select/select.ts +++ b/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')