feat(select): repeated chars support

Author: thejackshelton

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

@@ -467,8 +467,8 @@ test.describe('Keyboard Behavior', () => {
 
   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 ({
+          WHEN the user types in the letter "j"
+          THEN the first option starting with the letter "j" should have data-highlighted`, async ({
       page,
     }) => {
       const { getRoot, getTrigger, openListbox } = await setup(
@@ -480,6 +480,21 @@ test.describe('Keyboard Behavior', () => {
       const highlightedOpt = getRoot().locator('[data-highlighted]');
       await expect(highlightedOpt).toContainText('j', { ignoreCase: true });
     });
+
+    test(`GIVEN an open select with a typeahead support
+          WHEN the user types in the letter "j" twice
+          THEN the second option starting with the letter "j" should have data-highlighted`, async ({
+      page,
+    }) => {
+      const { getRoot, getTrigger, openListbox } = await setup(
+        page,
+        'select-typeahead-test',
+      );
+      await openListbox('ArrowDown');
+      await getTrigger().pressSequentially('jj', { delay: 250 });
+      const highlightedOpt = getRoot().locator('[data-highlighted]');
+      await expect(highlightedOpt).toContainText('jessie', { ignoreCase: true });
+    });
   });
 });
 

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

@@ -14,7 +14,7 @@ export type SelectContext = {
   listboxRef: Signal<HTMLUListElement | undefined>;
 
   // core state
-  optionsSig: Signal<Opt[] | undefined>;
+  optionsSig: Signal<Opt[]>;
   highlightedIndexSig: Signal<number | null>;
   isListboxOpenSig: Signal<boolean>;
   selectedIndexSig: Signal<number | null>;

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

@@ -40,7 +40,12 @@ export const SelectImpl = component$<SelectProps>((props) => {
    * Updates the options when the options change
    * (for example, when a new option is added)
    **/
-  const optionsSig = useComputed$(() => props._options);
+  const optionsSig = useComputed$(() => {
+    if (props._options === undefined || props._options.length === 0) {
+      return [];
+    }
+    return props._options;
+  });
 
   const optionsIndexMap = new Map(
     optionsSig.value?.map((option, index) => [option.value, index]),

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

@@ -1,26 +1,56 @@
-import { useContext, $ } from '@builder.io/qwik';
+import { useContext, useSignal, $, useComputed$ } from '@builder.io/qwik';
 import SelectContextId from './select-context';
 
 export function useTypeahead() {
   const context = useContext(SelectContextId);
+  const inputStrSig = useSignal('');
+  const indexDiffSig = useSignal<number | undefined>(undefined);
+
+  const firstCharOptionsSig = useComputed$(() => {
+    return context.optionsSig.value.map((opt) => opt.value.slice(0, 1).toLowerCase());
+  });
 
   const typeahead$ = $((key: string): void => {
     if (key.length > 1) {
-      return null;
+      return;
     }
 
-    const singleInputChar = key.toLowerCase();
-    const firstCharOptions = context.optionsSig.value?.map((opt) =>
-      opt.value.slice(0, 1).toLowerCase(),
-    );
+    inputStrSig.value += key;
 
-    const charIndex = firstCharOptions.indexOf(singleInputChar);
+    const firstCharOnly$ = $(() => {
+      // First opens the listbox if it is not already displayed and then moves visual focus to the first option that matches the typed character.
+      const singleInputChar = key.toLowerCase();
 
-    if (charIndex === -1) {
-      return null;
-    }
+      const charIndex = firstCharOptionsSig.value.indexOf(singleInputChar);
+
+      if (charIndex === -1 || charIndex === undefined) {
+        return null;
+      }
+      if (indexDiffSig.value === undefined) {
+        console.log('Is key length 1?', charIndex);
+        indexDiffSig.value = charIndex + 1;
+        context.highlightedIndexSig.value = charIndex;
+        return;
+      }
+
+      // If the same character is typed in succession, visual focus cycles among the options starting with that character.
+      const isRepeatedChar = firstCharOptionsSig.value[indexDiffSig.value - 1] === key;
+
+      if (isRepeatedChar) {
+        const nextChars = firstCharOptionsSig.value.slice(indexDiffSig.value);
+        const repeatIndex = nextChars.indexOf(key);
+        if (repeatIndex !== -1) {
+          const nextIndex = repeatIndex + indexDiffSig.value;
+
+          context.highlightedIndexSig.value = nextIndex;
+          indexDiffSig.value = nextIndex + 1;
+        }
+      }
+
+      return;
+    });
 
-    context.highlightedIndexSig.value = charIndex;
+    firstCharOnly$();
   });
 
   return { typeahead$ };