feat(select): get proper indexes, better test suite

Author: thejackshelton

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

@@ -13,7 +13,7 @@ export default component$(() => {
           <SelectOption
             class="border-dashed border-blue-400 data-[highlighted]:border-2"
             key={user}
-            disabled={index === 0 ? true : false}
+            disabled={index === 0 || index === usersSig.value.length - 1 ? true : false}
           >
             {user}
           </SelectOption>

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

@@ -236,12 +236,56 @@ test.describe('Keyboard Behavior', () => {
     await getTrigger().press('ArrowDown');
     await expect(options[1]).toHaveAttribute('data-highlighted');
   });
+
+  test(`GIVEN an open hero select
+  WHEN the third option is highlighted and the up arrow key is pressed
+  THEN the second option should have data-highlighted`, async ({ page }) => {
+    const { getTrigger, getListbox, getOptions } = await setup(page, 'select-hero-test');
+
+    await getTrigger().focus();
+    await getTrigger().press('Enter');
+    // should be open initially
+    await expect(getListbox()).toBeVisible();
+
+    // third option highlighted
+    const options = await getOptions();
+    await expect(options[0]).toHaveAttribute('data-highlighted');
+    await getTrigger().press('ArrowDown');
+    await getTrigger().press('ArrowDown');
+
+    await getTrigger().press('ArrowUp');
+    await expect(options[1]).toHaveAttribute('data-highlighted');
+  });
+
+  test(`GIVEN an open hero select
+        WHEN the listbox is closed with a chosen option 
+        AND the down arrow key is pressed
+        THEN the data-highlighted option should not change on re-open`, async ({
+    page,
+  }) => {
+    const { getTrigger, getListbox, getOptions } = await setup(page, 'select-hero-test');
+
+    await getTrigger().focus();
+    await getTrigger().press('Enter');
+    // should be open initially
+    await expect(getListbox()).toBeVisible();
+
+    // second option highlighted
+    const options = await getOptions();
+    await getTrigger().press('ArrowDown');
+    await expect(options[1]).toHaveAttribute('data-highlighted');
+    await getTrigger().press('Enter');
+    await expect(getListbox()).toBeHidden();
+
+    await getTrigger().press('ArrowDown');
+    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 }) => {
+        It should have aria-disabled`, async ({ page }) => {
     const { getTrigger, getListbox, getOptions } = await setup(
       page,
       'select-disabled-test',
@@ -258,7 +302,26 @@ test.describe('disabled', () => {
     await expect(options[0]).toBeDisabled();
   });
 
-  test(`GIVEN an open hero select by the enter key
+  test(`GIVEN an open disable select with the first option disabled
+        WHEN clicking the disabled option
+        THEN the listbox should stay open`, 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();
+
+    const options = await getOptions();
+    // eslint-disable-next-line playwright/no-force-option
+    await options[0].click({ force: true });
+    await expect(getListbox()).toBeVisible();
+  });
+
+  test(`GIVEN an open disabled select
         WHEN first option is disabled
         THEN the second option should have data-highlighted`, async ({ page }) => {
     const { getTrigger, getListbox, getOptions } = await setup(
@@ -273,4 +336,21 @@ test.describe('disabled', () => {
     const options = await getOptions();
     await expect(options[1]).toHaveAttribute('data-highlighted');
   });
+
+  test(`GIVEN an open disabled select
+        WHEN the last option is disabled and the end key is pressed
+        THEN the second last index 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();
+    await getTrigger().press('End');
+    const options = await getOptions();
+    await expect(options[options.length - 2]).toHaveAttribute('data-highlighted');
+  });
 });

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

@@ -1,6 +1,6 @@
 import { component$, type PropsOf, useContext, sync$, $ } from '@builder.io/qwik';
 import SelectContextId from './select-context';
-import { getNextEnabledOptionIndex } from './utils';
+import { getNextEnabledOptionIndex, getPrevEnabledOptionIndex } from './utils';
 
 export type OptionsType = {
   element: HTMLLIElement;
@@ -49,27 +49,34 @@ export const SelectTrigger = component$<SelectTriggerProps>((props) => {
     }
 
     if (e.key === 'Home') {
-      context.highlightedIndexSig.value = 0;
+      context.highlightedIndexSig.value = getNextEnabledOptionIndex(-1, options);
     }
 
     if (e.key === 'End') {
-      context.highlightedIndexSig.value = context.optionRefsArray.value.length - 1;
+      const lastEnabledOptionIndex = getPrevEnabledOptionIndex(options.length, options);
+      context.highlightedIndexSig.value = lastEnabledOptionIndex;
     }
 
     /** 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;
     }
 
-    if (context.isListboxOpenSig.value) {
+    if (context.isListboxOpenSig.value && !shouldOpen) {
       if (e.key === 'ArrowDown') {
         context.highlightedIndexSig.value = getNextEnabledOptionIndex(
           context.highlightedIndexSig.value,
           options,
         );
       }
+
+      if (e.key === 'ArrowUp') {
+        context.highlightedIndexSig.value = getPrevEnabledOptionIndex(
+          context.highlightedIndexSig.value,
+          options,
+        );
+      }
     }
   });
 

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

@@ -20,3 +20,18 @@ export const getNextEnabledOptionIndex = (index: number, options: OptionsType) =
   }
   return (currentIndex + offset) % len;
 };
+
+export const getPrevEnabledOptionIndex = (index: number, options: OptionsType) => {
+  let offset = 1;
+  let currentIndex = index;
+  const opts = options;
+  const len = opts.length;
+  while (opts[(currentIndex - offset + len) % len]?.isDisabled) {
+    offset++;
+    if (currentIndex - offset < 0) {
+      currentIndex = len - 1;
+      offset = 0;
+    }
+  }
+  return (currentIndex - offset + len) % len;
+};