Merge pull request #224 from IBM/combobox-dispatch

feat(combo-box): dispatch select, clear events

src/ComboBox/ComboBox.Story.svelte

@@ -11,8 +11,8 @@
     {
       id: "option-4",
       text:
-        "An example option that is really long to show what should be done to handle long text"
+        "An example option that is really long to show what should be done to handle long text",
-    }
+    },
   ];
 
   $: toggled = false;
@@ -58,6 +58,12 @@
     bind:ref
     bind:value
     bind:selectedIndex
+    on:select={({ detail }) => {
+      console.log('on:select', detail);
+    }}
+    on:clear={() => {
+      console.log('on:clear');
+    }}
     {items}
     {shouldFilterItem} />
 </div>

src/ComboBox/ComboBox.svelte

@@ -111,7 +111,7 @@
    */
   export let ref = null;
 
-  import { afterUpdate } from "svelte";
+  import { createEventDispatcher, afterUpdate } from "svelte";
   import WarningFilled16 from "carbon-icons-svelte/lib/WarningFilled16";
   import {
     ListBox,
@@ -122,6 +122,8 @@
     ListBoxSelection,
   } from "../ListBox";
 
+  const dispatch = createEventDispatcher();
+
   let selectedId = undefined;
   let inputValue = "";
   let highlightedIndex = -1;
@@ -145,9 +147,18 @@
     } else {
       highlightedIndex = -1;
       inputValue = selectedItem ? selectedItem.text : "";
+
+      if (!selectedItem) {
+        selectedId = undefined;
+        selectedIndex = -1;
+      }
     }
   });
 
+  $: if (selectedIndex > -1) {
+    selectedId = items[selectedIndex].id;
+    dispatch("select", { selectedId, selectedIndex, selectedItem });
+  }
   $: ariaLabel = $$props["aria-label"] || "Choose an item";
   $: menuId = `menu-${id}`;
   $: comboId = `combo-${id}`;
@@ -250,6 +261,7 @@
       {/if}
       {#if inputValue}
         <ListBoxSelection
+          on:clear
           on:clear={() => {
             selectedIndex = -1;
             open = false;
@@ -274,7 +286,6 @@
             active={selectedIndex === i || selectedId === item.id}
             highlighted={highlightedIndex === i || selectedIndex === i}
             on:click={() => {
-              selectedId = item.id;
               selectedIndex = items
                 .map(({ id }) => id)
                 .indexOf(filteredItems[i].id);