From 295d5eb11a9fb5d46162ac65d60a0212c7d7cb68 Mon Sep 17 00:00:00 2001
From: Sean Lynch <techniq35@gmail.com>
Date: Mon, 15 Jul 2024 11:20:17 -0400
Subject: [PATCH] [SelectField] Fix handling of disabled options

---
 .changeset/rotten-colts-kick.md                   |  5 +++++
 .../src/lib/components/_SelectListOptions.svelte  | 15 +++++++++++++--
 .../docs/components/SelectField/+page.svelte      |  9 +++++----
 3 files changed, 23 insertions(+), 6 deletions(-)
 create mode 100644 .changeset/rotten-colts-kick.md

diff --git a/.changeset/rotten-colts-kick.md b/.changeset/rotten-colts-kick.md
new file mode 100644
index 000000000..866e2792a
--- /dev/null
+++ b/.changeset/rotten-colts-kick.md
@@ -0,0 +1,5 @@
+---
+'svelte-ux': patch
+---
+
+[SelectField] Fix handling of disabled options
diff --git a/packages/svelte-ux/src/lib/components/_SelectListOptions.svelte b/packages/svelte-ux/src/lib/components/_SelectListOptions.svelte
index 9f681057a..f9d8434ca 100644
--- a/packages/svelte-ux/src/lib/components/_SelectListOptions.svelte
+++ b/packages/svelte-ux/src/lib/components/_SelectListOptions.svelte
@@ -49,11 +49,22 @@
       // Find the index of the clicked on element (ignoring group headers)
       const optionIndex = slotEl
         ? [...menuOptionsEl.children]
-            .filter((el) => !el.classList.contains('group-header'))
+            .filter((el) => {
+              if (el.classList.contains('group-header')) {
+                // ignore clicks on group options
+                return false;
+                // @ts-expect-error
+              } else if (el.disabled) {
+                // ignore disabled items
+                return false;
+              } else {
+                return true;
+              }
+            })
             .indexOf(slotEl)
         : -1;
       logger.debug({ slotEl, optionIndex });
-      // ignore clicks on group options
+
       if (optionIndex !== -1) {
         selectIndex(optionIndex);
       }
diff --git a/packages/svelte-ux/src/routes/docs/components/SelectField/+page.svelte b/packages/svelte-ux/src/routes/docs/components/SelectField/+page.svelte
index 59a1199ae..0f5cc8bb8 100644
--- a/packages/svelte-ux/src/routes/docs/components/SelectField/+page.svelte
+++ b/packages/svelte-ux/src/routes/docs/components/SelectField/+page.svelte
@@ -221,7 +221,7 @@
 
 <Preview>
   <SelectField {options}>
-    <div slot="option" let:option let:index let:selected let:highlightIndex>
+    <svelte:fragment slot="option" let:option let:index let:selected let:highlightIndex>
       <MenuItem
         class={cls(
           index === highlightIndex && 'bg-surface-content/5',
@@ -229,13 +229,14 @@
           option.group ? 'px-4' : 'px-2'
         )}
         scrollIntoView={index === highlightIndex}
+        disabled={index === 2}
       >
         <div>
           <div>{option.label}</div>
           <div class="text-sm text-text-surface-content/50">{option.value}</div>
         </div>
       </MenuItem>
-    </div>
+    </svelte:fragment>
   </SelectField>
 </Preview>
 
@@ -243,7 +244,7 @@
 
 <Preview>
   <SelectField {options} bind:value activeOptionIcon={true}>
-    <div slot="option" let:option let:index let:selected let:highlightIndex>
+    <svelte:fragment slot="option" let:option let:index let:selected let:highlightIndex>
       <MenuItem
         class={cls(
           index === highlightIndex && 'bg-surface-content/5',
@@ -255,7 +256,7 @@
       >
         {option.label}
       </MenuItem>
-    </div>
+    </svelte:fragment>
   </SelectField>
 </Preview>