Merge branch 'main' of https://github.com/techniq/svelte-ux

techniq · Jul 9, 2024 · 8ea2f99 · 8ea2f99
2 parents c5de38c + e8703ed
commit 8ea2f99
Show file tree

Hide file tree

Showing 3 changed files with 19 additions and 1 deletion.
diff --git a/.changeset/tough-actors-switch.md b/.changeset/tough-actors-switch.md
@@ -0,0 +1,5 @@
+---
+'svelte-ux': patch
+---
+
+[SelectField] Fix options with object value due to non-unique {#each} keys
diff --git a/packages/svelte-ux/src/lib/components/_SelectListOptions.svelte b/packages/svelte-ux/src/lib/components/_SelectListOptions.svelte
@@ -68,7 +68,7 @@
     onKeyPress(e);
   }}
 >
-  {#each filteredOptions ?? [] as option, index (`${option.group}-${option.value}`)}
+  {#each filteredOptions ?? [] as option, index (JSON.stringify(option))}
     {@const previousOption = filteredOptions[index - 1]}
     {#if option.group && option.group !== previousOption?.group}
       <div

diff --git a/packages/svelte-ux/src/routes/docs/components/SelectField/+page.svelte b/packages/svelte-ux/src/routes/docs/components/SelectField/+page.svelte
@@ -124,6 +124,19 @@
   />
 </Preview>
 
+<h2>Object value options</h2>
+
+<Preview>
+  <SelectField
+    options={[
+      { label: 'Empty', value: null },
+      { label: 'Foo', value: { id: 1 } },
+      { label: 'Bar', value: { id: 2 } },
+      { label: 'Baz', value: { id: 3 } },
+    ]}
+  />
+</Preview>
+
 <h2>Options with icons</h2>
 
 <Preview>