fix(list-box): remove stopPropagation clikc modifier

docs/src/pages/components/ComboBox.svx

@@ -22,6 +22,10 @@ items={[
   {id: "2", text: "Fax"}
   ]}  />
 
+### Multiple combo boxes
+
+<FileSource src="/framed/ComboBox/MultipleComboBox" />
+
 ### Filterable
 
 <FileSource src="/framed/ComboBox/FilterableComboBox" />

docs/src/pages/components/Dropdown.svx

@@ -23,6 +23,10 @@ Use the `itemToString` prop to format the display of individual items.
   {id: "1", text: "Email"},
   {id: "2", text: "Fax"}]}" />
 
+### Multiple dropdowns
+
+<FileSource src="/framed/Dropdown/MultipleDropdown" />
+
 ### Light variant
 
 <Dropdown light titleText="Contact" selectedIndex={0} items="{[{id: "0", text: "Slack"},

docs/src/pages/components/MultiSelect.svx

@@ -34,7 +34,9 @@ To select (or bind) items, pass an array of item ids to `selectedIds`.
     {id: "2", text: "Fax"}]}" 
   />
 
+### Multiple multi-select dropdowns
 
+<FileSource src="/framed/MultiSelect/MultipleMultiSelect" />
 
 ### Format item display text
 

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

@@ -0,0 +1,41 @@
+<script>
+  import { ComboBox } from "carbon-components-svelte";
+
+  const items = [
+    { id: "0", text: "Slack" },
+    { id: "1", text: "Email" },
+    { id: "2", text: "Fax" },
+  ];
+
+  let comboBox1_selectedIndex = -1;
+  let comboBox2_selectedIndex = -1;
+
+  const formatSelected = (i) => (items[i] ? items[i].text : "N/A");
+
+  $: primary = formatSelected(comboBox1_selectedIndex);
+  $: secondary = formatSelected(comboBox2_selectedIndex);
+</script>
+
+<style>
+  div {
+    margin: var(--cds-layout-01) 0 var(--cds-layout-03);
+  }
+</style>
+
+<ComboBox
+  bind:selectedIndex="{comboBox1_selectedIndex}"
+  titleText="Primary contact"
+  placeholder="Select primary contact method"
+  items="{items}"
+/>
+
+<div>Primary: {primary}</div>
+
+<ComboBox
+  bind:selectedIndex="{comboBox2_selectedIndex}"
+  titleText="Secondary contact"
+  placeholder="Select secondary contact method"
+  items="{items}"
+/>
+
+<div>Secondary: {secondary}</div>

docs/src/pages/framed/Dropdown/MultipleDropdown.svelte

@@ -0,0 +1,41 @@
+<script>
+  import { Dropdown } from "carbon-components-svelte";
+
+  const items = [
+    { id: "0", text: "Slack" },
+    { id: "1", text: "Email" },
+    { id: "2", text: "Fax" },
+  ];
+
+  let dropdown1_selectedIndex = 0;
+  let dropdown2_selectedIndex = 1;
+
+  const formatSelected = (i) => (items[i] ? items[i].text : "N/A");
+
+  $: primary = formatSelected(dropdown1_selectedIndex);
+  $: secondary = formatSelected(dropdown2_selectedIndex);
+</script>
+
+<style>
+  div {
+    margin: var(--cds-layout-01) 0 var(--cds-layout-03);
+  }
+</style>
+
+<Dropdown
+  titleText="Primary contact"
+  bind:selectedIndex="{dropdown1_selectedIndex}"
+  items="{items}"
+/>
+
+<div>Primary: {primary}</div>
+
+<Dropdown
+  invalid="{dropdown1_selectedIndex === dropdown2_selectedIndex}"
+  invalidText="Secondary contact method must be different from the primary contact"
+  titleText="Secondary contact"
+  bind:selectedIndex="{dropdown2_selectedIndex}"
+  items="{items}"
+/>
+
+<div>Secondary: {secondary}</div>

docs/src/pages/framed/MultiSelect/MultipleMultiSelect.svelte

@@ -0,0 +1,44 @@
+<script>
+  import { MultiSelect } from "carbon-components-svelte";
+
+  const items = [
+    { id: "0", text: "Slack" },
+    { id: "1", text: "Email" },
+    { id: "2", text: "Fax" },
+  ];
+
+  let multiselect1_selectedIds = ["0"];
+  let multiselect2_selectedIds = ["1", "2"];
+
+  const formatSelected = (i) =>
+    i.length === 0
+      ? "N/A"
+      : i.map((id) => items.find((item) => item.id === id).text).join(", ");
+
+  $: primary = formatSelected(multiselect1_selectedIds);
+  $: secondary = formatSelected(multiselect2_selectedIds);
+</script>
+
+<style>
+  div {
+    margin: var(--cds-layout-01) 0 var(--cds-layout-03);
+  }
+</style>
+
+<MultiSelect
+  titleText="Primary contact"
+  bind:selectedIds="{multiselect1_selectedIds}"
+  label="Select contact methods..."
+  items="{items}"
+/>
+
+<div>Primary: {primary}</div>
+
+<MultiSelect
+  titleText="Secondary contact"
+  bind:selectedIds="{multiselect2_selectedIds}"
+  label="Select contact methods..."
+  items="{items}"
+/>
+
+<div>Secondary: {secondary}</div>

src/ListBox/ListBox.svelte

@@ -45,7 +45,7 @@
       e.stopPropagation();
     }
   }}"
-  on:click|preventDefault|stopPropagation
+  on:click|preventDefault
 >
   <slot />
 </div>