feat(select): initial typeahead support

Author: thejackshelton

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

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

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

@@ -58,6 +58,12 @@ This element is used to create a drop-down list, it's often used in a form, to c
   <Showcase name="open-change" />
 </div>
 
+## Typeahead
+
+<div data-testid="select-typeahead-test">
+  <Showcase name="typeahead" />
+</div>
+
 ## Building blocks
 
 <CodeSnippet name="building-blocks" />

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

@@ -464,6 +464,23 @@ test.describe('Keyboard Behavior', () => {
       expect(optStr).toEqual(await getValue());
     });
   });
+
+  test.describe('typeahead', () => {
+    test(`GIVEN an open select with a typeahead support
+          WHEN the user types in the letter "r"
+          THEN the first option starting with the letter "r" should have data-highlighted`, async ({
+      page,
+    }) => {
+      const { getRoot, getTrigger, openListbox } = await setup(
+        page,
+        'select-typeahead-test',
+      );
+      await openListbox('ArrowDown');
+      await getTrigger().pressSequentially('j', { delay: 250 });
+      const highlightedOpt = getRoot().locator('[data-highlighted]');
+      await expect(highlightedOpt).toContainText('j', { ignoreCase: true });
+    });
+  });
 });
 
 test.describe('Disabled', () => {

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

@@ -1,6 +1,7 @@
 import { component$, type PropsOf, useContext, sync$, $, Slot } from '@builder.io/qwik';
 import SelectContextId from './select-context';
 import { getNextEnabledOptionIndex, getPrevEnabledOptionIndex } from './utils';
+import { useTypeahead } from './use-select';
 export type OpenKeys = 'ArrowUp' | 'Enter' | 'Space' | 'ArrowDown';
 
 type SelectTriggerProps = PropsOf<'button'>;
@@ -9,6 +10,8 @@ export const SelectTrigger = component$<SelectTriggerProps>((props) => {
   const openKeys = ['ArrowUp', 'ArrowDown'];
   const closedKeys = [`Escape`];
 
+  const { typeahead$ } = useTypeahead();
+
   // Both the space and enter keys run with handleClick$
   const handleClick$ = $(() => {
     context.isListboxOpenSig.value = !context.isListboxOpenSig.value;
@@ -77,6 +80,8 @@ export const SelectTrigger = component$<SelectTriggerProps>((props) => {
       if (e.key === 'Enter' || e.key === ' ') {
         context.selectedIndexSig.value = context.highlightedIndexSig.value;
       }
+
+      typeahead$(e.key);
     }
   });
 

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

@@ -0,0 +1,27 @@
+import { useContext, $ } from '@builder.io/qwik';
+import SelectContextId from './select-context';
+
+export function useTypeahead() {
+  const context = useContext(SelectContextId);
+
+  const typeahead$ = $((key: string): void => {
+    if (key.length > 1) {
+      return null;
+    }
+
+    const singleInputChar = key.toLowerCase();
+    const firstCharOptions = context.optionsSig.value?.map((opt) =>
+      opt.value.slice(0, 1).toLowerCase(),
+    );
+
+    const charIndex = firstCharOptions.indexOf(singleInputChar);
+
+    if (charIndex === -1) {
+      return null;
+    }
+
+    context.highlightedIndexSig.value = charIndex;
+  });
+
+  return { typeahead$ };
+}