feat(select): options now correctly skip disabled elements

Author: thejackshelton

apps/website/src/routes/docs/headless/select/examples/disabled.tsx

@@ -0,0 +1,24 @@
+import { component$, useSignal } from '@builder.io/qwik';
+import { Select, SelectListbox, SelectOption, SelectTrigger } from '@qwik-ui/headless';
+
+export default component$(() => {
+  const usersSig = useSignal<string[]>(['Tim', 'Ryan', 'Jim', 'Jessie', 'Abby']);
+
+  return (
+    <Select class="relative min-w-40">
+      <p>This one is the disabled</p>
+      <SelectTrigger class="w-full border-2 border-dashed border-red-400" />
+      <SelectListbox class="absolute w-full border-2 border-dashed border-green-400 bg-slate-900 p-2">
+        {usersSig.value.map((user, index) => (
+          <SelectOption
+            class="border-dashed border-blue-400 data-[highlighted]:border-2"
+            key={user}
+            disabled={index === 0 ? true : false}
+          >
+            {user}
+          </SelectOption>
+        ))}
+      </SelectListbox>
+    </Select>
+  );
+});

apps/website/src/routes/docs/headless/select/index.mdx

@@ -14,6 +14,10 @@ This element is used to create a drop-down list, it's often used in a form, to c
   <Showcase name="hero" />
 </div>
 
+<div data-testid="select-disabled-test">
+  <Showcase name="disabled" />
+</div>
+
 ## Building blocks
 
 <CodeSnippet name="building-blocks" />

apps/website/src/routes/docs/headless/select/select.spec.ts

@@ -237,3 +237,40 @@ test.describe('Keyboard Behavior', () => {
     await expect(options[1]).toHaveAttribute('data-highlighted');
   });
 });
+
+test.describe('disabled', () => {
+  test(`GIVEN an open hero select with the first option disabled
+        WHEN clicking the disabled option
+        It should be disabled`, async ({ page }) => {
+    const { getTrigger, getListbox, getOptions } = await setup(
+      page,
+      'select-disabled-test',
+    );
+
+    await getTrigger().focus();
+    await getTrigger().press('Enter');
+    // should be open initially
+    await expect(getListbox()).toBeVisible();
+
+    await getTrigger().focus();
+    await getTrigger().press('ArrowDown');
+    const options = await getOptions();
+    await expect(options[0]).toBeDisabled();
+  });
+
+  test(`GIVEN an open hero select by the enter key
+        WHEN first option is disabled
+        THEN the second option should have data-highlighted`, async ({ page }) => {
+    const { getTrigger, getListbox, getOptions } = await setup(
+      page,
+      'select-disabled-test',
+    );
+
+    await getTrigger().focus();
+    await getTrigger().press('ArrowDown');
+    // should be open initially
+    await expect(getListbox()).toBeVisible();
+    const options = await getOptions();
+    await expect(options[1]).toHaveAttribute('data-highlighted');
+  });
+});

packages/kit-headless/src/components/select/select-context.ts

@@ -15,7 +15,7 @@ export type SelectContext = {
   selectedOptionRef: Signal<HTMLLIElement | null>;
 
   // core state
-  highlightedIndexSig: Signal<number>;
+  highlightedIndexSig: Signal<number | null>;
   isListboxOpenSig: Signal<boolean>;
   selectedIndexSig: Signal<number | null>;
 };

packages/kit-headless/src/components/select/select-option.tsx

@@ -56,6 +56,7 @@ export const SelectOption = component$<SelectOptionProps>((props) => {
       ref={optionRef}
       tabIndex={-1}
       aria-selected={isSelected}
+      aria-disabled={disabled === true ? 'true' : 'false'}
       data-selected={isSelected ? '' : undefined}
       data-highlighted={isHighlighted ? '' : undefined}
       data-disabled={disabled ? '' : undefined}

packages/kit-headless/src/components/select/select-trigger.tsx

@@ -13,7 +13,6 @@ export const SelectTrigger = component$<SelectTriggerProps>((props) => {
   const context = useContext(SelectContextId);
   const openKeys = ['ArrowUp', 'ArrowDown'];
   const closedKeys = [`Escape`];
-  // const initialIndex = context.highlightedIndexSig.value === -1;
 
   // Both the space and enter keys run with handleClick$
   const handleClick$ = $(() => {
@@ -36,7 +35,7 @@ export const SelectTrigger = component$<SelectTriggerProps>((props) => {
         throw new Error('Qwik UI: internal select option is undefined');
       }
 
-      const isDisabled = option.value.hasAttribute('disabled');
+      const isDisabled = option.value.ariaDisabled === 'true';
 
       return { element: option.value, isDisabled };
     });
@@ -51,17 +50,16 @@ export const SelectTrigger = component$<SelectTriggerProps>((props) => {
 
     if (e.key === 'Home') {
       context.highlightedIndexSig.value = 0;
-      console.log('Highlighted index: ', context.highlightedIndexSig.value);
-      return;
     }
 
     if (e.key === 'End') {
       context.highlightedIndexSig.value = context.optionRefsArray.value.length - 1;
-      return;
     }
 
-    if (context.highlightedIndexSig.value === -1) {
-      context.highlightedIndexSig.value++;
+    /** When initially opening the listbox, we want to grab the first enabled option index */
+    if (context.highlightedIndexSig.value === null) {
+      context.highlightedIndexSig.value = getNextEnabledOptionIndex(-1, options);
+      console.log(context.highlightedIndexSig.value);
       return;
     }
 

packages/kit-headless/src/components/select/select.tsx

@@ -25,7 +25,7 @@ export const SelectImpl = component$<SelectProps>((props) => {
   const selectedIndexSig = useSignal<number | null>(null);
   const selectedOptionRef = useSignal<HTMLLIElement | null>(null);
   const isListboxOpenSig = useSignal<boolean>(false);
-  const highlightedIndexSig = useSignal<number>(-1);
+  const highlightedIndexSig = useSignal<number | null>(null);
 
   useTask$(function deriveSelectedRef({ track }) {
     track(() => selectedIndexSig.value);

packages/kit-headless/src/components/select/utils.ts

@@ -6,7 +6,7 @@ export const getNextEnabledOptionIndex = (index: number, options: OptionsType) =
   const opts = options;
   const len = opts.length;
 
-  while (opts[(currentIndex + offset) % len]?.isDisabled) {
+  while (opts[(currentIndex + offset) % len].isDisabled) {
     offset++;
     if (offset + currentIndex > len - 1) {
       currentIndex = 0;