Clear ComboBox Programaticaly (#804)

* Added clear function

* Dispatching clear event

* Exporting function clear

* Added example

docs/src/pages/components/ComboBox.svx

@@ -1,6 +1,9 @@
 <script>
   import { ComboBox } from "carbon-components-svelte";
+  import { Button } from "carbon-components-svelte";
   import Preview from "../../components/Preview.svelte";
+  let comboboxComponent
+
 </script>
 
 ### Default
@@ -22,6 +25,17 @@ items={[
   {id: "2", text: "Fax"}
   ]}  />
 
+### Clear selection
+<ComboBox titleText="Contact" placeholder="Select contact method"
+bind:this={comboboxComponent} 
+items={[
+  {id: "0", text: "Slack"},
+  {id: "1", text: "Email"},
+  {id: "2", text: "Fax"}
+  ]}  />
+<br>
+<Button on:click={comboboxComponent.clear}>Clear</Button>
+
 ### Multiple combo boxes
 
 <FileSource src="/framed/ComboBox/MultipleComboBox" />

src/ComboBox/ComboBox.svelte

@@ -123,6 +123,14 @@
     highlightedIndex = index;
   }
 
+  export function clear() {
+    selectedIndex = -1;
+    highlightedIndex = -1;
+    open = false;
+    inputValue = "";
+    ref?.focus();
+  }
+
   afterUpdate(() => {
     if (open) {
       ref.focus();
@@ -140,6 +148,9 @@
   $: if (selectedIndex > -1) {
     selectedId = items[selectedIndex].id;
     dispatch("select", { selectedId, selectedIndex, selectedItem });
+  } else {
+    clear();
+    dispatch("clear");
   }
   $: ariaLabel = $$props["aria-label"] || "Choose an item";
   $: menuId = `menu-${id}`;
@@ -286,13 +297,7 @@
       {#if inputValue}
         <ListBoxSelection
           on:clear
-          on:clear="{() => {
+          on:clear="{clear}"
-            selectedIndex = -1;
-            highlightedIndex = -1;
-            open = false;
-            inputValue = '';
-            ref.focus();
-          }}"
           translateWithId="{translateWithId}"
           disabled="{disabled}"
           open="{open}"