fix(ComboBox): programmatically set selected index (#995)

* fix(ComboBox): programmatically set selected index

* refactor(ComboBox): renaming example to Reactive example

docs/src/pages/components/ComboBox.svx

@@ -3,7 +3,7 @@
   import { Button } from "carbon-components-svelte";
   import Preview from "../../components/Preview.svelte";
   let comboboxComponent
-
+  let selectedIndex = 1
 </script>
 
 ### Default
@@ -25,7 +25,12 @@ items={[
   {id: "2", text: "Fax"}
   ]}  />
 
+### Reactive example
+
+<FileSource src="/framed/ComboBox/ReactiveComboBox" />
+
 ### Clear selection
+
 <ComboBox titleText="Contact" placeholder="Select contact method"
 bind:this={comboboxComponent} 
 items={[

docs/src/pages/framed/ComboBox/ReactiveComboBox.svelte

@@ -0,0 +1,18 @@
+<script>
+  import { ComboBox, Button } from "carbon-components-svelte";
+  let selectedIndex = 1;
+</script>
+
+<ComboBox
+  titleText="Contact"
+  placeholder="Select contact method"
+  bind:selectedIndex
+  items="{[
+    { id: '0', text: 'Slack' },
+    { id: '1', text: 'Email' },
+    { id: '2', text: 'Fax' },
+  ]}"
+/>
+<br />
+<Button on:click="{() => (selectedIndex = -1)}">Set to -1 (unselected)</Button>
+<Button on:click="{() => (selectedIndex = 2)}">Set to 2 (Fax)</Button>

src/ComboBox/ComboBox.svelte

@@ -110,7 +110,6 @@
   let selectedId = undefined;
   let selectedItem = undefined;
   let inputValue = value;
-  let prevInputValue = undefined;
   let prevSelectedIndex = undefined;
   let highlightedIndex = -1;
 
@@ -130,6 +129,7 @@
    * @type {() => void}
    */
   export function clear() {
+    prevSelectedIndex = undefined;
     selectedIndex = -1;
     highlightedIndex = -1;
     highlightedId = undefined;
@@ -150,6 +150,10 @@
       if (!selectedItem) {
         selectedId = undefined;
         selectedIndex = -1;
+        inputValue = "";
+        highlightedIndex = -1;
+        highlightedId = undefined;
+        prevSelectedIndex = undefined;
       } else {
         // programmatically set selectedIndex
         inputValue = selectedItem.text;
@@ -157,18 +161,23 @@
     }
   });
 
-  $: if (selectedIndex > -1 && prevSelectedIndex !== selectedIndex) {
-    prevSelectedIndex = selectedIndex;
-    if (filteredItems?.length === 1 && open) {
-      selectedId = filteredItems[0].id;
-      selectedItem = filteredItems[0];
-      highlightedIndex = -1;
-      highlightedId = undefined;
-    } else {
-      selectedId = items[selectedIndex].id;
-      selectedItem = items[selectedIndex];
+  $: if (selectedIndex > -1) {
+    if (prevSelectedIndex !== selectedIndex) {
+      prevSelectedIndex = selectedIndex;
+      if (filteredItems?.length === 1 && open) {
+        selectedId = filteredItems[0].id;
+        selectedItem = filteredItems[0];
+        highlightedIndex = -1;
+        highlightedId = undefined;
+      } else {
+        selectedId = items[selectedIndex].id;
+        selectedItem = items[selectedIndex];
+      }
+      dispatch("select", { selectedId, selectedIndex, selectedItem });
     }
-    dispatch("select", { selectedId, selectedIndex, selectedItem });
+  } else {
+    prevSelectedIndex = selectedIndex;
+    selectedItem = undefined;
   }
 
   $: ariaLabel = $$props["aria-label"] || "Choose an item";