From 069e9caf36873656358824b9aca878b528471417 Mon Sep 17 00:00:00 2001
From: "K.Kiyokawa" <koichi20110068@gmail.com>
Date: Mon, 17 Jan 2022 13:33:54 +0900
Subject: [PATCH] docs: update ComboBox

---
 docs/src/pages/components/ComboBox.svx            |  4 ++--
 .../pages/framed/ComboBox/ComboBoxClear.svelte    |  2 +-
 .../pages/framed/ComboBox/MultipleComboBox.svelte | 15 ++++++++-------
 .../pages/framed/ComboBox/ReactiveComboBox.svelte | 10 ++++++----
 4 files changed, 17 insertions(+), 14 deletions(-)

diff --git a/docs/src/pages/components/ComboBox.svx b/docs/src/pages/components/ComboBox.svx
index f40f1679..c4117b7c 100644
--- a/docs/src/pages/components/ComboBox.svx
+++ b/docs/src/pages/components/ComboBox.svx
@@ -12,10 +12,10 @@ items={[
   {id: "2", text: "Fax"}
   ]}  />
 
-### Selected index
+### Selected id
 
 <ComboBox titleText="Contact" placeholder="Select contact method"
-selectedIndex={1}
+selectedId="1"
 items={[
   {id: "0", text: "Slack"},
   {id: "1", text: "Email"},
diff --git a/docs/src/pages/framed/ComboBox/ComboBoxClear.svelte b/docs/src/pages/framed/ComboBox/ComboBoxClear.svelte
index fdb29808..de314152 100644
--- a/docs/src/pages/framed/ComboBox/ComboBoxClear.svelte
+++ b/docs/src/pages/framed/ComboBox/ComboBoxClear.svelte
@@ -7,7 +7,7 @@
 <ComboBox
   titleText="Contact"
   placeholder="Select contact method"
-  selectedIndex="{1}"
+  selectedId="1"
   bind:this="{ref}"
   items="{[
     { id: '0', text: 'Slack' },
diff --git a/docs/src/pages/framed/ComboBox/MultipleComboBox.svelte b/docs/src/pages/framed/ComboBox/MultipleComboBox.svelte
index 0cd9d56f..7e53612f 100644
--- a/docs/src/pages/framed/ComboBox/MultipleComboBox.svelte
+++ b/docs/src/pages/framed/ComboBox/MultipleComboBox.svelte
@@ -7,17 +7,18 @@
     { id: "2", text: "Fax" },
   ];
 
-  let comboBox1_selectedIndex = -1;
-  let comboBox2_selectedIndex = -1;
+  let comboBox1_selectedId = undefined;
+  let comboBox2_selectedId = undefined;
 
-  const formatSelected = (i) => (items[i] ? items[i].text : "N/A");
+  const formatSelected = (id) =>
+    items.find((item) => item.id === id)?.text ?? "N/A";
 
-  $: primary = formatSelected(comboBox1_selectedIndex);
-  $: secondary = formatSelected(comboBox2_selectedIndex);
+  $: primary = formatSelected(comboBox1_selectedId);
+  $: secondary = formatSelected(comboBox2_selectedId);
 </script>
 
 <ComboBox
-  bind:selectedIndex="{comboBox1_selectedIndex}"
+  bind:selectedId="{comboBox1_selectedId}"
   titleText="Primary contact"
   placeholder="Select primary contact method"
   items="{items}"
@@ -26,7 +27,7 @@
 <div>Primary: {primary}</div>
 
 <ComboBox
-  bind:selectedIndex="{comboBox2_selectedIndex}"
+  bind:selectedId="{comboBox2_selectedId}"
   titleText="Secondary contact"
   placeholder="Select secondary contact method"
   items="{items}"
diff --git a/docs/src/pages/framed/ComboBox/ReactiveComboBox.svelte b/docs/src/pages/framed/ComboBox/ReactiveComboBox.svelte
index 5d273153..9c594761 100644
--- a/docs/src/pages/framed/ComboBox/ReactiveComboBox.svelte
+++ b/docs/src/pages/framed/ComboBox/ReactiveComboBox.svelte
@@ -1,12 +1,12 @@
 <script>
   import { ComboBox, Button } from "carbon-components-svelte";
-  let selectedIndex = 1;
+  let selectedId = "1";
 </script>
 
 <ComboBox
   titleText="Contact"
   placeholder="Select contact method"
-  bind:selectedIndex
+  bind:selectedId
   items="{[
     { id: '0', text: 'Slack' },
     { id: '1', text: 'Email' },
@@ -14,5 +14,7 @@
   ]}"
 />
 <br />
-<Button on:click="{() => (selectedIndex = -1)}">Set to -1 (unselected)</Button>
-<Button on:click="{() => (selectedIndex = 2)}">Set to 2 (Fax)</Button>
+<Button on:click="{() => (selectedId = undefined)}"
+  >Set to undefined (unselected)</Button
+>
+<Button on:click="{() => (selectedId = '2')}">Set to 2 (Fax)</Button>