feat(combobox): focus first option when hitting down arrow

Author: thejackshelton

apps/website/src/routes/docs/headless/(components)/combobox/examples.tsx

@@ -12,7 +12,7 @@ import {
 
 import { PreviewCodeExample } from '../../../_components/preview-code-example/preview-code-example';
 
-const trainers = [
+const stringsExample = [
   'Caleb',
   'Olivia',
   'James',
@@ -25,13 +25,13 @@ const trainers = [
   'Elizabeth',
 ];
 
-interface Trainer {
+type Trainer = {
   testValue: string;
   testLabel: string;
   disabled: boolean;
-}
+};
 
-const ALL_OPTIONS: Array<Trainer> = [
+const objectExample: Array<Trainer> = [
   { testValue: 'alice', testLabel: 'Alice', disabled: false },
   { testValue: 'joana', testLabel: 'Joana', disabled: false },
   { testValue: 'malcolm', testLabel: 'Malcolm', disabled: false },
@@ -40,41 +40,39 @@ const ALL_OPTIONS: Array<Trainer> = [
 ];
 
 export const Example01 = component$(() => {
-  // const trainersSig = useSignal(trainers);
-  const optionsSig = useSignal(ALL_OPTIONS);
-  const showExample = useSignal(true);
+  const stringsExampleSig = useSignal(stringsExample);
+  const objectExampleSig = useSignal(objectExample);
+  const isComboboxVisibleSig = useSignal(true);
 
   const onInputChange$ = $((value: string) => {
-    optionsSig.value = ALL_OPTIONS.filter((option) => {
+    objectExampleSig.value = objectExample.filter((option) => {
       return option.testLabel.toLowerCase().includes(value.toLowerCase());
     });
-
-    console.log(optionsSig.value);
   });
 
   return (
     <PreviewCodeExample>
       <div class="flex flex-col gap-4" q:slot="actualComponent">
         <button
           onClick$={() => {
-            showExample.value = !showExample.value;
+            isComboboxVisibleSig.value = !isComboboxVisibleSig.value;
           }}
         >
-          Show them
+          Toggle Client Side
         </button>
-        {showExample.value === true && (
+        {isComboboxVisibleSig.value && (
           <Combobox
-            options={optionsSig}
+            options={objectExampleSig}
             onInputChange$={onInputChange$}
             optionValueKey="testValue"
             optionLabelKey="testLabel"
-            optionComponent$={$((option: string | Trainer, index: number) => (
+            optionComponent$={$((option: Trainer, index: number) => (
               <ComboboxOption
                 index={index}
                 option={option}
                 class="rounded-sm px-2 hover:bg-[#496080] focus:bg-[#496080]"
               >
-                {typeof option === 'string' ? option : option.testLabel}
+                {option.testLabel}
               </ComboboxOption>
             ))}
             class="relative"
@@ -103,13 +101,6 @@ export const Example01 = component$(() => {
             </ComboboxPortal>
           </Combobox>
         )}
-        <button
-        // onClick$={() => {
-        //   trainersSig.value = ['One', 'Two', 'Three', 'Four', 'Five'];
-        // }}
-        >
-          Change them
-        </button>
       </div>
 
       <div q:slot="codeExample">

packages/kit-headless/src/components/combobox/combobox-context.type.ts

@@ -17,4 +17,5 @@ export interface ComboboxContext {
   highlightedIndexSig: Signal<number>;
 }
 
+// Whether it is a string or an object we want to be able to access the value
 export type Option = ComboboxContext['options']['value'][number];

packages/kit-headless/src/components/combobox/combobox-input.tsx

@@ -25,12 +25,17 @@ export const ComboboxInput = component$((props: ComboboxInputProps) => {
     );
 
     if (e.key === 'ArrowDown') {
+      if (!context.isListboxOpenSig.value && context.highlightedIndexSig.value === -1) {
+        context.highlightedIndexSig.value = 0;
+      }
+
       // If the listbox is already open, move down
       if (context.isListboxOpenSig.value) {
         context.highlightedIndexSig.value === context.options.value.length - 1
           ? (context.highlightedIndexSig.value = 0)
           : context.highlightedIndexSig.value++;
       }
+
       context.isListboxOpenSig.value = true;
     }
 

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

@@ -15,7 +15,7 @@ export type ComboboxProps = {
   defaultValue?: string;
   placeholder?: string;
   // filter: boolean | ((value: string) => boolean);
-  optionComponent$?: QRL<(option: Option, index: number) => JSXNode>;
+  optionComponent$?: QRL<(option: any, index: number) => JSXNode>;
   onInputChange$?: QRL<(value: string) => void>;
   optionValue?: string;
   optionTextValue?: string;