From 3c2a5192ee4b43a27b13c204e329ade51322682c Mon Sep 17 00:00:00 2001
From: Anna Wen <54281166+annawen1@users.noreply.github.com>
Date: Thu, 8 Jul 2021 13:47:00 -0400
Subject: [PATCH] fix(select): add custom selected event for select component

---
 src/components/select/select-story.ts |  4 ++--
 src/components/select/select.ts       | 20 +++++++++++++++++++-
 2 files changed, 21 insertions(+), 3 deletions(-)

diff --git a/src/components/select/select-story.ts b/src/components/select/select-story.ts
index 88edd47cd..5cd648d0b 100644
--- a/src/components/select/select-story.ts
+++ b/src/components/select/select-story.ts
@@ -69,7 +69,7 @@ export const Default = args => {
       size="${ifNonNull(size)}"
       validity-message="${ifNonNull(validityMessage)}"
       value="${ifNonNull(value)}"
-      @input="${ifNonNull(onInput)}"
+      @bx-select-selected="${ifNonNull(onInput)}"
     >
       ${children}
     </bx-select>
@@ -88,7 +88,7 @@ Default.parameters = {
       size: select('Dropdown size (size)', sizes, null),
       validityMessage: textNullable('The validity message (validity-message)', ''),
       value: textNullable('The value of the selected item (value)', ''),
-      onInput: action('input'),
+      onInput: action('bx-select-selected'),
     }),
   },
 };
diff --git a/src/components/select/select.ts b/src/components/select/select.ts
index f4dbe2b8f..9e489e234 100644
--- a/src/components/select/select.ts
+++ b/src/components/select/select.ts
@@ -57,7 +57,18 @@ class BXSelect extends ValidityMixin(FormMixin(LitElement)) {
    * @param event The event.
    */
   private _handleInput({ target }: Event) {
-    this.value = (target as HTMLSelectElement).value;
+    const { value } = target as HTMLSelectElement;
+    this.value = value;
+    const { eventSelect } = this.constructor as typeof BXSelect;
+    this.dispatchEvent(
+      new CustomEvent(eventSelect, {
+        bubbles: true,
+        composed: true,
+        detail: {
+          value,
+        },
+      })
+    );
   }
 
   /**
@@ -379,6 +390,13 @@ class BXSelect extends ValidityMixin(FormMixin(LitElement)) {
     return `${prefix}-select-item`;
   }
 
+  /**
+   * The name of the custom event fired after item is selected.
+   */
+  static get eventSelect() {
+    return `${prefix}-select-selected`;
+  }
+
   static styles = styles; // `styles` here is a `CSSResult` generated by custom WebPack loader
 }