diff --git a/apps/docs/src/remix-hook-form/select.stories.tsx b/apps/docs/src/remix-hook-form/select.stories.tsx index 6b7d37e..2ae93c8 100644 --- a/apps/docs/src/remix-hook-form/select.stories.tsx +++ b/apps/docs/src/remix-hook-form/select.stories.tsx @@ -1,5 +1,7 @@ import { zodResolver } from '@hookform/resolvers/zod'; +import * as React from 'react'; import { CanadaProvinceSelect, Select, USStateSelect } from '@lambdacurry/forms/remix-hook-form'; +import { Select as UISelect } from '@lambdacurry/forms/ui/select'; import { Button } from '@lambdacurry/forms/ui/button'; import { CANADA_PROVINCES } from '@lambdacurry/forms/ui/data/canada-provinces'; import { US_STATES } from '@lambdacurry/forms/ui/data/us-states'; @@ -630,3 +632,62 @@ export const CreatableOption: Story = { }); }, }; + +// Story to verify custom input type for search input +const NumberSearchTypeExample = () => { + // Use UI Select directly with number-valued options + const numberOptions = [ + { label: '1', value: 1 }, + { label: '2', value: 2 }, + { label: '3', value: 3 }, + { label: '4', value: 4 }, + { label: '5', value: 5 }, + { label: '6', value: 6 }, + { label: '7', value: 7 }, + { label: '8', value: 8 }, + { label: '9', value: 9 }, + { label: '10', value: 10 }, + { label: '11', value: 11 }, + { label: '12', value: 12 }, + { label: '13', value: 13 }, + { label: '14', value: 14 }, + { label: '15', value: 15 }, + { label: '16', value: 16 }, + { label: '17', value: 17 }, + { label: '18', value: 18 }, + { label: '19', value: 19 }, + { label: '20', value: 20 }, + ]; + const [value, setValue] = React.useState(10); + return ( +
+ + options={numberOptions} + placeholder="Pick a number" + searchInputProps={{ type: 'number' }} + value={value} + onValueChange={setValue} + /> +
+ ); +}; + +export const NumberSearchInputType: Story = { + decorators: [ + // No router needed for this simple UI-only story + (StoryFn) => , + ], + render: () => , + play: async ({ canvasElement, step }) => { + const canvas = within(canvasElement); + await step('Open select and assert input type is number', async () => { + // Open the UI select + const trigger = await canvas.findByRole('combobox'); + await userEvent.click(trigger); + + const input = await within(document.body).findByPlaceholderText('Search...'); + expect(input).toBeInTheDocument(); + expect(input).toHaveAttribute('type', 'number'); + }); + }, +}; diff --git a/packages/components/package.json b/packages/components/package.json index 8879255..be7da4d 100644 --- a/packages/components/package.json +++ b/packages/components/package.json @@ -1,6 +1,6 @@ { "name": "@lambdacurry/forms", - "version": "0.22.4", + "version": "0.22.5", "type": "module", "main": "./dist/index.js", "types": "./dist/index.d.ts", diff --git a/packages/components/src/ui/command.tsx b/packages/components/src/ui/command.tsx index 8d24e69..1cee6ee 100644 --- a/packages/components/src/ui/command.tsx +++ b/packages/components/src/ui/command.tsx @@ -30,15 +30,25 @@ const CommandDialog = ({ children, ...props }: CommandDialogProps) => { ); }; -const CommandInput = ({ className, ...props }: React.ComponentPropsWithoutRef) => ( +type CommandInputProps = React.ComponentPropsWithoutRef & { + type?: React.InputHTMLAttributes['type']; +}; + +const CommandInput = ({ className, type = 'text', ...props }: CommandInputProps) => (
- + {/* + To override the type of the input, we couldn't apply the type attribute to the CommandPrimitive.Input component b/c it's hardcoded as 'text' in the cmdk library + Reference: https://github.com/pacocoursey/cmdk/blob/main/cmdk/src/index.tsx#L816 + */} + + +
);