fix(select): typeahead now properly moves to other options

Author: thejackshelton

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

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

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

@@ -27,7 +27,6 @@ export function useTypeahead() {
         return null;
       }
       if (indexDiffSig.value === undefined) {
-        console.log('Is key length 1?', charIndex);
         indexDiffSig.value = charIndex + 1;
         context.highlightedIndexSig.value = charIndex;
         return;
@@ -45,11 +44,18 @@ export function useTypeahead() {
           context.highlightedIndexSig.value = nextIndex;
           indexDiffSig.value = nextIndex + 1;
         }
+        return;
       }
+      indexDiffSig.value = charIndex + 1;
+      context.highlightedIndexSig.value = charIndex;
 
       return;
     });
 
+    const multipleChars$ = $(() => {
+      // If multiple keys are typed in quick succession, visual focus moves to the first option that matches the full string.
+    });
+
     firstCharOnly$();
   });