From 42f646eaaa850ee98afa874585d7ee23cbf24e0f Mon Sep 17 00:00:00 2001 From: Cory LaViska Date: Tue, 16 Mar 2021 08:23:23 -0400 Subject: [PATCH] add sl-clear event --- docs/getting-started/changelog.md | 1 + src/components/select/select.ts | 4 ++++ 2 files changed, 5 insertions(+) diff --git a/docs/getting-started/changelog.md b/docs/getting-started/changelog.md index 0d337ca5..653614b3 100644 --- a/docs/getting-started/changelog.md +++ b/docs/getting-started/changelog.md @@ -8,6 +8,7 @@ _During the beta period, these restrictions may be relaxed in the event of a mis ## Next +- Added `sl-clear` event to `sl-select` - Fixed a bug where dynamically changing menu items in `sl-select` would cause the display label to be blank [#374](https://github.com/shoelace-style/shoelace/discussions/374) - Fixed the margin in `sl-menu-label` to align with menu items diff --git a/src/components/select/select.ts b/src/components/select/select.ts index dcb7c9c5..b88d452e 100644 --- a/src/components/select/select.ts +++ b/src/components/select/select.ts @@ -101,6 +101,9 @@ export default class SlSelect extends LitElement { /** This will be true when the control is in an invalid state. Validity is determined by the `required` prop. */ @property({ type: Boolean, reflect: true }) invalid = false; + /** Emitted when the clear button is activated. */ + @event('sl-clear') slClear: EventEmitter; + /** Emitted when the control's value changes. */ @event('sl-change') slChange: EventEmitter; @@ -160,6 +163,7 @@ export default class SlSelect extends LitElement { handleClearClick(event: MouseEvent) { event.stopPropagation(); this.value = this.multiple ? [] : ''; + this.slClear.emit(); this.syncItemsFromValue(); }