fix(SelectField): Properly handle option selection with option slot d…

…efined using `<svelte:fragment slot="option">` or `<div slot="option">` (#512)
techniq · Nov 4, 2024 · e47763d · e47763d
1 parent df4e367
commit e47763d
Show file tree

Hide file tree

Showing 2 changed files with 7 additions and 2 deletions.
diff --git a/.changeset/breezy-dingos-mate.md b/.changeset/breezy-dingos-mate.md
@@ -0,0 +1,5 @@
+---
+'svelte-ux': patch
+---
+
+fix(SelectField): Properly handle option selection with option slot defined using `<svelte:fragment slot="option">` or `<div slot="option">`
diff --git a/packages/svelte-ux/src/lib/components/_SelectListOptions.svelte b/packages/svelte-ux/src/lib/components/_SelectListOptions.svelte
@@ -44,8 +44,8 @@
 
     if (e.target instanceof HTMLElement) {
       // Find slot parent of click target option, fallback to `e.target` if slot is not overridden
-      // Use `.options > ` in case slot is nested (ex. GraphQLSelect with slot)
-      const slotEl = e.target.closest('.options > [slot=option]') ?? e.target;
+      // Use `.options > *` in case slot is nested (ex. `<svelte:fragment slot="option">` vs `<div slot="option">`)
+      const slotEl = e.target.closest('.options > *') ?? e.target;
       // Find the index of the clicked on element (ignoring group headers)
       const optionIndex = slotEl
         ? [...menuOptionsEl.children]