fix(select): add custom selected event for select component (#667)

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'),
     }),
   },
 };

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
 }