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>