From dfc00f6668435f43b906e25ec936286286625c64 Mon Sep 17 00:00:00 2001
From: Rafael Dessotti <42934425+rafadess@users.noreply.github.com>
Date: Mon, 6 Sep 2021 13:47:48 -0300
Subject: [PATCH] Clear ComboBox Programaticaly (#804)

* Added clear function

* Dispatching clear event

* Exporting function clear

* Added example
---
 docs/src/pages/components/ComboBox.svx | 14 ++++++++++++++
 src/ComboBox/ComboBox.svelte           | 19 ++++++++++++-------
 2 files changed, 26 insertions(+), 7 deletions(-)

diff --git a/docs/src/pages/components/ComboBox.svx b/docs/src/pages/components/ComboBox.svx
index 014769f0..b63d1c67 100644
--- a/docs/src/pages/components/ComboBox.svx
+++ b/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" />
diff --git a/src/ComboBox/ComboBox.svelte b/src/ComboBox/ComboBox.svelte
index 539c94f8..2f7edd86 100644
--- a/src/ComboBox/ComboBox.svelte
+++ b/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="{() => {
-            selectedIndex = -1;
-            highlightedIndex = -1;
-            open = false;
-            inputValue = '';
-            ref.focus();
-          }}"
+          on:clear="{clear}"
           translateWithId="{translateWithId}"
           disabled="{disabled}"
           open="{open}"