[SelectField] Fix handling of disabled options

techniq · Jul 15, 2024 · 295d5eb · 295d5eb
1 parent 19ca5a6
commit 295d5eb
Show file tree

Hide file tree

Showing 3 changed files with 23 additions and 6 deletions.
diff --git a/.changeset/rotten-colts-kick.md 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
@@ -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
@@ -221,29 +221,30 @@
 
 <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',
           option === selected && 'font-semibold',
           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>
 
 <h2>option slot with icon (field icon updates based on selected option)</h2>
 
 <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>