feat(select): typeahead support for a closed listbox

Author: thejackshelton

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

@@ -78,8 +78,8 @@ What I like to do is look at other places around the web and see how things work
 
 We also take inspiration from awesome headless libraries in other communities. For example, like the popular headless libraries below:
 
-- [Radix UI](https://www.radix-ui.com/primitives/docs/components/accordion) is a React Headless library.
 - [React Aria](https://react-spectrum.adobe.com/react-aria/components.html) is a React Headless library.
+- [Radix UI](https://www.radix-ui.com/primitives/docs/components/accordion) is a React Headless library.
 - [Melt UI](https://melt-ui.com/docs/builders/accordion) is a Svelte headless library.
 - [Kobalte](https://kobalte.dev/docs/core/components/accordion) is a Solid JS headless library
 - [Headless UI](https://headlessui.com/) is a React and Vue headless library.

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

@@ -645,6 +645,30 @@ test.describe('Keyboard Behavior', () => {
       await getTrigger().press('d');
       await expect(highlightedOpt).toContainText('dog', { ignoreCase: true });
     });
+
+    test(`GIVEN a closed select with typeahead support
+          WHEN the user types a letter matching an option
+          THEN the display value should first matching option`, async ({ page }) => {
+      const { getTrigger } = await setup(page, 'select-hero-test');
+      await getTrigger().focus();
+      await getTrigger().press('j');
+      await expect(getTrigger()).toHaveText('Jim');
+    });
+
+    test(`GIVEN a closed select with typeahead support
+          WHEN the user types a letter matching an option
+          THEN the first matching option should be selected`, async ({ page }) => {
+      // ideally want to refactor this so that even if the test example is changed, the test will still pass, getting it more programmatically.
+      const { getRoot, getTrigger } = await setup(page, 'select-hero-test');
+      await getTrigger().focus();
+      await getTrigger().press('j');
+      const firstJOption = getRoot().getByRole('option', {
+        name: 'Jim',
+        includeHidden: true,
+      });
+      await expect(firstJOption).toHaveAttribute('aria-selected', 'true');
+      await expect(firstJOption).toHaveAttribute('data-highlighted');
+    });
   });
 
   test.describe('looping', () => {

packages/kit-headless/src/components/select/notes.md

@@ -2,6 +2,7 @@ What do we absolutely need? I am talking about the bare minimum, but powerful fu
 
 Inspiration:
 
+- React Aria
 - Radix UI
 - Kobalte UI
 - Melt UI

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

@@ -33,6 +33,7 @@ export const SelectTrigger = component$<SelectTriggerProps>((props) => {
   });
 
   const handleKeyDown$ = $((e: KeyboardEvent) => {
+    typeahead$(e.key);
     const shouldOpen = !context.isListboxOpenSig.value && openKeys.includes(e.key);
     const shouldClose = context.isListboxOpenSig.value && closedKeys.includes(e.key);
     if (!context.optionsSig.value) return;
@@ -141,8 +142,6 @@ export const SelectTrigger = component$<SelectTriggerProps>((props) => {
           context.loop,
         );
       }
-
-      typeahead$(e.key);
     }
   });
 

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

@@ -35,6 +35,11 @@ export function useTypeahead() {
       if (indexDiffSig.value === undefined) {
         indexDiffSig.value = firstCharIndex + 1;
         context.highlightedIndexSig.value = firstCharIndex;
+
+        if (!context.isListboxOpenSig.value) {
+          context.selectedIndexSig.value = firstCharIndex;
+        }
+
         return;
       }
 
@@ -54,16 +59,25 @@ export function useTypeahead() {
           const nextIndex = repeatIndex + indexDiffSig.value;
 
           context.highlightedIndexSig.value = nextIndex;
+          if (!context.isListboxOpenSig.value) {
+            context.selectedIndexSig.value = nextIndex;
+          }
           indexDiffSig.value = nextIndex + 1;
           return;
         }
 
         indexDiffSig.value = undefined;
         context.highlightedIndexSig.value = firstCharIndex;
+        if (!context.isListboxOpenSig.value) {
+          context.selectedIndexSig.value = firstCharIndex;
+        }
         return;
       }
       indexDiffSig.value = firstCharIndex + 1;
       context.highlightedIndexSig.value = firstCharIndex;
+      if (!context.isListboxOpenSig.value) {
+        context.selectedIndexSig.value = firstCharIndex;
+      }
 
       return;
     });
@@ -81,6 +95,9 @@ export function useTypeahead() {
       });
       if (firstPossibleOpt !== -1) {
         context.highlightedIndexSig.value = firstPossibleOpt;
+        if (!context.isListboxOpenSig.value) {
+          context.selectedIndexSig.value = firstPossibleOpt;
+        }
         return;
       }
       inputStrSig.value = key;