From ab4a0fa12963bc0bb549839bd0b91aac4699c225 Mon Sep 17 00:00:00 2001
From: metonym <ericyl.us@gmail.com>
Date: Wed, 12 Jan 2022 15:55:28 -1000
Subject: [PATCH] docs(combo-box): add clear without focus to "Clear selection"
 example

---
 docs/src/pages/components/ComboBox.svx        | 17 +++++-----------
 .../framed/ComboBox/ComboBoxClear.svelte      | 20 +++++++++++++++++++
 2 files changed, 25 insertions(+), 12 deletions(-)
 create mode 100644 docs/src/pages/framed/ComboBox/ComboBoxClear.svelte

diff --git a/docs/src/pages/components/ComboBox.svx b/docs/src/pages/components/ComboBox.svx
index 204573bf..f40f1679 100644
--- a/docs/src/pages/components/ComboBox.svx
+++ b/docs/src/pages/components/ComboBox.svx
@@ -1,9 +1,6 @@
 <script>
   import { ComboBox } from "carbon-components-svelte";
-  import { Button } from "carbon-components-svelte";
   import Preview from "../../components/Preview.svelte";
-  let comboboxComponent
-  let selectedIndex = 1
 </script>
 
 ### Default
@@ -31,15 +28,11 @@ items={[
 
 ### 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>
+To programmatically clear the selection, access the component instance using the [bind:this](https://svelte.dev/docs#bind_element) directive and invoke the `ComboBox.clear()` accessor.
+
+Specify `focus: false` in the method options to avoid re-focusing the input.
+
+<FileSource src="/framed/ComboBox/ComboBoxClear" />
 
 ### Multiple combo boxes
 
diff --git a/docs/src/pages/framed/ComboBox/ComboBoxClear.svelte b/docs/src/pages/framed/ComboBox/ComboBoxClear.svelte
new file mode 100644
index 00000000..fdb29808
--- /dev/null
+++ b/docs/src/pages/framed/ComboBox/ComboBoxClear.svelte
@@ -0,0 +1,20 @@
+<script>
+  import { ComboBox, Button } from "carbon-components-svelte";
+
+  let ref;
+</script>
+
+<ComboBox
+  titleText="Contact"
+  placeholder="Select contact method"
+  selectedIndex="{1}"
+  bind:this="{ref}"
+  items="{[
+    { id: '0', text: 'Slack' },
+    { id: '1', text: 'Email' },
+    { id: '2', text: 'Fax' },
+  ]}"
+/>
+<br />
+<Button on:click="{ref.clear}">Clear</Button>
+<Button on:click="{() => ref.clear({ focus: false })}">Clear (no focus)</Button>