feat: add keyboard navigation to Select component

- Add activeIndex state tracking with default value 0
- Implement ArrowUp/ArrowDown key handlers with bounds checking
- Reset activeIndex when filtered items change
- Add aria-activedescendant on search input for accessibility
- Generate unique IDs for each option element
- Add visual highlighting for active items (bg-gray-50)
- Implement scroll-into-view for active items
- Update Enter key to select active item instead of enterCandidate
- Add comprehensive keyboard navigation test story
- Create changeset for patch version bump
- Maintain all existing visuals, API, and functionality

Co-authored-by: Jake Ruesink <jaruesink@gmail.com>

Author: codegen-sh[bot]

.changeset/keyboard-navigation-select.md

@@ -0,0 +1,5 @@
+---
+"@lambdacurry/forms": patch
+---
+
+Select: add keyboard navigation with active item and Enter selection; maintain visuals and API.

apps/docs/src/remix-hook-form/phone-input.stories.tsx

@@ -37,11 +37,7 @@ const ControlledPhoneInputExample = () => {
     <RemixFormProvider {...methods}>
       <fetcher.Form onSubmit={methods.handleSubmit}>
         <div className="grid gap-8">
-          <PhoneInput
-            name="usaPhone"
-            label="Phone Number"
-            description="Enter a US phone number"
-          />
+          <PhoneInput name="usaPhone" label="Phone Number" description="Enter a US phone number" />
           <PhoneInput
             name="internationalPhone"
             label="International Phone Number"

apps/docs/src/remix-hook-form/select.stories.tsx

@@ -348,3 +348,96 @@ export const FormSubmission: Story = {
     });
   },
 };
+
+export const KeyboardNavigation: Story = {
+  parameters: {
+    docs: {
+      description: {
+        story: 'Test keyboard navigation with arrow keys and Enter selection.',
+      },
+    },
+  },
+  decorators: [selectRouterDecorator],
+  play: async ({ canvasElement, step }) => {
+    const canvas = within(canvasElement);
+
+    await step('Test keyboard navigation on Custom Region select', async () => {
+      // Open the Custom Region select
+      const regionSelect = canvas.getByLabelText('Custom Region');
+      await userEvent.click(regionSelect);
+
+      // Verify the dropdown is open and input is focused
+      const listbox = await within(document.body).findByRole('listbox');
+      expect(listbox).toBeInTheDocument();
+
+      const searchInput = within(listbox).getByPlaceholderText('Search...');
+      expect(searchInput).toHaveFocus();
+
+      // Verify first item is active by default (should have aria-activedescendant)
+      const firstOptionId = searchInput.getAttribute('aria-activedescendant');
+      expect(firstOptionId).toBeTruthy();
+
+      // Verify the first option exists and has the correct ID
+      const firstOption = within(listbox).getByRole('option', { name: 'Alabama' });
+      expect(firstOption).toHaveAttribute('id', firstOptionId);
+      expect(firstOption).toHaveAttribute('data-active', 'true');
+    });
+
+    await step('Navigate with arrow keys', async () => {
+      const listbox = within(document.body).getByRole('listbox');
+      const searchInput = within(listbox).getByPlaceholderText('Search...');
+
+      // Press ArrowDown twice to move to the third item
+      await userEvent.keyboard('{ArrowDown}');
+      await userEvent.keyboard('{ArrowDown}');
+
+      // Verify the active item has changed
+      const activeOptionId = searchInput.getAttribute('aria-activedescendant');
+      const activeOption = document.getElementById(activeOptionId!);
+      expect(activeOption).toHaveAttribute('data-active', 'true');
+
+      // Should be the third option (index 2)
+      expect(activeOption).toHaveAttribute('data-index', '2');
+    });
+
+    await step('Select with Enter key', async () => {
+      const listbox = within(document.body).getByRole('listbox');
+      const searchInput = within(listbox).getByPlaceholderText('Search...');
+
+      // Press Enter to select the active item
+      await userEvent.keyboard('{Enter}');
+
+      // Verify the dropdown closed and the trigger shows the selected value
+      await expect(() => within(document.body).getByRole('listbox')).rejects.toThrow();
+
+      const regionSelect = canvas.getByLabelText('Custom Region');
+      // The third item should be "Arizona" (AL, AK, AZ...)
+      expect(regionSelect).toHaveTextContent('Arizona');
+    });
+
+    await step('Test filtering and active item reset', async () => {
+      // Open the dropdown again
+      const regionSelect = canvas.getByLabelText('Custom Region');
+      await userEvent.click(regionSelect);
+
+      const listbox = await within(document.body).findByRole('listbox');
+      const searchInput = within(listbox).getByPlaceholderText('Search...');
+
+      // Type to filter
+      await userEvent.type(searchInput, 'cal');
+
+      // Verify the active item reset to the first filtered item
+      const activeOptionId = searchInput.getAttribute('aria-activedescendant');
+      const activeOption = document.getElementById(activeOptionId!);
+      expect(activeOption).toHaveAttribute('data-index', '0');
+      expect(activeOption).toHaveTextContent('California');
+
+      // Press Enter to select the filtered item
+      await userEvent.keyboard('{Enter}');
+
+      // Verify selection
+      await expect(() => within(document.body).getByRole('listbox')).rejects.toThrow();
+      expect(regionSelect).toHaveTextContent('California');
+    });
+  },
+};

apps/docs/src/remix-hook-form/select.test.tsx

@@ -1,80 +1,79 @@
+import type { StoryContext } from '@storybook/react';
 import { expect } from '@storybook/test';
 import { userEvent, within } from '@storybook/testing-library';
-import { StoryContext } from '@storybook/react';
 
 // Test selecting a US state
 export const testUSStateSelection = async ({ canvasElement }: StoryContext) => {
   const canvas = within(canvasElement);
-  
+
   // Find and click the US state dropdown
   const stateDropdown = canvas.getByLabelText('US State');
   await userEvent.click(stateDropdown);
-  
+
   // Select a state (e.g., California)
   const californiaOption = await canvas.findByText('California');
   await userEvent.click(californiaOption);
-  
+
   // Verify the selection
   expect(stateDropdown).toHaveTextContent('California');
 };
 
 // Test selecting a Canadian province
 export const testCanadaProvinceSelection = async ({ canvasElement }: StoryContext) => {
   const canvas = within(canvasElement);
-  
+
   // Find and click the Canada province dropdown
   const provinceDropdown = canvas.getByLabelText('Canadian Province');
   await userEvent.click(provinceDropdown);
-  
+
   // Select a province (e.g., Ontario)
   const ontarioOption = await canvas.findByText('Ontario');
   await userEvent.click(ontarioOption);
-  
+
   // Verify the selection
   expect(provinceDropdown).toHaveTextContent('Ontario');
 };
 
 // Test form submission
 export const testFormSubmission = async ({ canvasElement }: StoryContext) => {
   const canvas = within(canvasElement);
-  
+
   // Select a state
   const stateDropdown = canvas.getByLabelText('US State');
   await userEvent.click(stateDropdown);
   const californiaOption = await canvas.findByText('California');
   await userEvent.click(californiaOption);
-  
+
   // Select a province
   const provinceDropdown = canvas.getByLabelText('Canadian Province');
   await userEvent.click(provinceDropdown);
   const ontarioOption = await canvas.findByText('Ontario');
   await userEvent.click(ontarioOption);
-  
+
   // Select a custom region
   const regionDropdown = canvas.getByLabelText('Custom Region');
   await userEvent.click(regionDropdown);
   const customOption = await canvas.findByText('New York');
   await userEvent.click(customOption);
-  
+
   // Submit the form
   const submitButton = canvas.getByRole('button', { name: 'Submit' });
   await userEvent.click(submitButton);
-  
+
   // Verify the submission (mock response would be shown)
   await expect(canvas.findByText('Selected regions:')).resolves.toBeInTheDocument();
 };
 
 // Test validation errors
 export const testValidationErrors = async ({ canvasElement }: StoryContext) => {
   const canvas = within(canvasElement);
-  
+
   // Submit the form without selecting anything
   const submitButton = canvas.getByRole('button', { name: 'Submit' });
   await userEvent.click(submitButton);
-  
+
   // Verify error messages
   await expect(canvas.findByText('Please select a state')).resolves.toBeInTheDocument();
   await expect(canvas.findByText('Please select a province')).resolves.toBeInTheDocument();
   await expect(canvas.findByText('Please select a region')).resolves.toBeInTheDocument();
 };
-

package.json

@@ -2,10 +2,7 @@
   "name": "forms",
   "version": "0.2.0",
   "private": true,
-  "workspaces": [
-    "apps/*",
-    "packages/*"
-  ],
+  "workspaces": ["apps/*", "packages/*"],
   "scripts": {
     "start": "yarn dev",
     "dev": "turbo run dev",

packages/components/package.json

@@ -26,9 +26,7 @@
       "import": "./dist/ui/*.js"
     }
   },
-  "files": [
-    "dist"
-  ],
+  "files": ["dist"],
   "scripts": {
     "prepublishOnly": "yarn run build",
     "build": "vite build",

packages/components/src/remix-hook-form/canada-province-select.tsx

@@ -1,16 +1,8 @@
-import * as React from 'react';
-import { Select, type SelectProps } from './select';
 import { CANADA_PROVINCES } from '../ui/data/canada-provinces';
+import { Select, type SelectProps } from './select';
 
 export type CanadaProvinceSelectProps = Omit<SelectProps, 'options'>;
 
 export function CanadaProvinceSelect(props: CanadaProvinceSelectProps) {
-  return (
-    <Select
-      {...props}
-      options={CANADA_PROVINCES}
-      placeholder="Select a province"
-    />
-  );
+  return <Select {...props} options={CANADA_PROVINCES} placeholder="Select a province" />;
 }
-

packages/components/src/remix-hook-form/index.ts

@@ -17,4 +17,3 @@ export * from './use-data-table-url-state';
 export * from './select';
 export * from './us-state-select';
 export * from './canada-province-select';
-

packages/components/src/remix-hook-form/phone-input.tsx

@@ -1,5 +1,8 @@
-import * as React from 'react';
-import { PhoneInputField as BasePhoneInputField, type PhoneInputFieldProps as BasePhoneInputFieldProps } from '../ui/phone-input-field';
+import type * as React from 'react';
+import {
+  PhoneInputField as BasePhoneInputField,
+  type PhoneInputFieldProps as BasePhoneInputFieldProps,
+} from '../ui/phone-input-field';
 import { FormControl, FormDescription, FormLabel, FormMessage } from './form';
 
 import { useRemixFormContext } from 'remix-hook-form';

packages/components/src/remix-hook-form/select.tsx

@@ -1,8 +1,8 @@
-import * as React from 'react';
+import type * as React from 'react';
 import { useRemixFormContext } from 'remix-hook-form';
-import { FormControl, FormDescription, FormLabel, FormMessage } from './form';
 import { FormField, FormItem } from '../ui/form';
-import { Select as UISelect, type SelectProps as UISelectProps, type SelectUIComponents } from '../ui/select';
+import { type SelectUIComponents, Select as UISelect, type SelectProps as UISelectProps } from '../ui/select';
+import { FormControl, FormDescription, FormLabel, FormMessage } from './form';
 
 export interface SelectProps extends Omit<UISelectProps, 'value' | 'onValueChange'> {
   name: string;
@@ -19,14 +19,7 @@ export interface SelectProps extends Omit<UISelectProps, 'value' | 'onValueChang
   >;
 }
 
-export function Select({
-  name,
-  label,
-  description,
-  className,
-  components,
-  ...props
-}: SelectProps) {
+export function Select({ name, label, description, className, components, ...props }: SelectProps) {
   const { control } = useRemixFormContext();
 
   return (
@@ -50,9 +43,7 @@ export function Select({
               }}
             />
           </FormControl>
-          {description && (
-            <FormDescription Component={components?.FormDescription}>{description}</FormDescription>
-          )}
+          {description && <FormDescription Component={components?.FormDescription}>{description}</FormDescription>}
           <FormMessage Component={components?.FormMessage} />
         </FormItem>
       )}