fix(select): added test for multiple chars (failing

Author: thejackshelton

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

@@ -491,7 +491,7 @@ test.describe('Keyboard Behavior', () => {
         'select-typeahead-test',
       );
       await openListbox('ArrowDown');
-      await getTrigger().pressSequentially('jj', { delay: 250 });
+      await getTrigger().pressSequentially('jj', { delay: 1250 });
       const highlightedOpt = getRoot().locator('[data-highlighted]');
       await expect(highlightedOpt).toContainText('jessie', { ignoreCase: true });
     });
@@ -506,10 +506,27 @@ test.describe('Keyboard Behavior', () => {
         'select-typeahead-test',
       );
       await openListbox('ArrowDown');
-      await getTrigger().pressSequentially('jjt', { delay: 250 });
+      await getTrigger().pressSequentially('jjt', { delay: 1250 });
       const highlightedOpt = getRoot().locator('[data-highlighted]');
       await expect(highlightedOpt).toContainText('tim', { ignoreCase: true });
     });
+
+    test(`GIVEN an open select with typeahead support and multiple characters
+          WHEN the user types in the letter "a"
+          AND waits a bit, then types in the letter "je"
+          THEN the first option starting with "je" should have data-highlighted`, async ({
+      page,
+    }) => {
+      const { getRoot, getTrigger, openListbox } = await setup(
+        page,
+        'select-typeahead-test',
+      );
+      await openListbox('ArrowDown');
+      await getTrigger().pressSequentially('a', { delay: 1250 });
+      await getTrigger().pressSequentially('je', { delay: 250 });
+      const highlightedOpt = getRoot().locator('[data-highlighted]');
+      await expect(highlightedOpt).toContainText('jessie', { ignoreCase: true });
+    });
   });
 });
 

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

@@ -62,11 +62,13 @@ export function useTypeahead() {
         inputStrSig.value = '';
       }, 1000);
     });
-    //
+
     if (inputStrSig.value.length === 1) {
       firstCharOnly$();
     }
-
+    // const firstCharOptionsSig = useComputed$(() => {
+    //   return context.optionsSig.value.map((opt) => opt.value.slice(0, 1).toLowerCase());
+    // });
     multipleChars$();
   });