feat(select): enhance Select component with search and creatable options

jaruesink · jaruesink · commit 55716fd6f83d · 2025-09-21T20:42:37.000-05:00
- Added searchable and creatable props to the Select component, allowing for dynamic option creation and search functionality.
- Implemented a default search input using CommandInput, improving user experience.
- Updated related stories in Storybook to demonstrate new search behavior and creatable options.
diff --git a/apps/docs/src/remix-hook-form/select.stories.tsx b/apps/docs/src/remix-hook-form/select.stories.tsx
@@ -85,6 +85,21 @@ const handleFormSubmission = async (request: Request) => {
   };
 };
 
+// Region-only submission handler for stories that only submit the `region` field
+const handleRegionSubmission = async (request: Request) => {
+  const regionSchema = z.object({ region: z.string().min(1) });
+  const { data, errors } = await getValidatedFormData<{ region: string }>(request, zodResolver(regionSchema));
+
+  if (errors) {
+    return { errors };
+  }
+
+  return {
+    message: 'Form submitted successfully',
+    selectedRegion: data.region,
+  };
+};
+
 const meta: Meta<typeof Select> = {
   title: 'RemixHookForm/Select',
   component: Select,
@@ -348,3 +363,182 @@ export const FormSubmission: Story = {
     });
   },
 };
+
+// Additional examples for search behavior and creatable options
+
+const SearchDisabledExample = () => {
+  const fetcher = useFetcher<{ message: string }>();
+  const methods = useRemixForm<{ region: string }>({
+    resolver: zodResolver(z.object({ region: z.string().min(1) })),
+    defaultValues: { region: '' },
+    fetcher,
+    submitConfig: { action: '/', method: 'post' },
+  });
+  return (
+    <RemixFormProvider {...methods}>
+      <fetcher.Form onSubmit={methods.handleSubmit}>
+        <Select
+          name="region"
+          label="Custom Region"
+          description="Search disabled"
+          options={[...US_STATES.slice(0, 5), ...CANADA_PROVINCES.slice(0, 5)]}
+          placeholder="Select a custom region"
+          searchable={false}
+        />
+      </fetcher.Form>
+    </RemixFormProvider>
+  );
+};
+
+export const SearchDisabled: Story = {
+  decorators: [
+    withReactRouterStubDecorator({
+      routes: [
+        {
+          path: '/',
+          Component: SearchDisabledExample,
+          action: async ({ request }: ActionFunctionArgs) => handleFormSubmission(request),
+        },
+      ],
+    }),
+  ],
+  play: async ({ canvasElement, step }) => {
+    const canvas = within(canvasElement);
+    await step('Open select and ensure no search input', async () => {
+      const regionSelect = canvas.getByLabelText('Custom Region');
+      await userEvent.click(regionSelect);
+      const listbox = await within(document.body).findByRole('listbox');
+      expect(within(listbox).queryByPlaceholderText('Search...')).not.toBeInTheDocument();
+    });
+  },
+};
+
+const CustomSearchPlaceholderExample = () => {
+  const fetcher = useFetcher<{ message: string }>();
+  const methods = useRemixForm<{ region: string }>({
+    resolver: zodResolver(z.object({ region: z.string().min(1) })),
+    defaultValues: { region: '' },
+    fetcher,
+    submitConfig: { action: '/', method: 'post' },
+  });
+  return (
+    <RemixFormProvider {...methods}>
+      <fetcher.Form onSubmit={methods.handleSubmit}>
+        <Select
+          name="region"
+          label="Custom Region"
+          description="Custom search placeholder"
+          options={[...US_STATES.slice(0, 5), ...CANADA_PROVINCES.slice(0, 5)]}
+          placeholder="Select a custom region"
+          searchInputProps={{ placeholder: 'Type to filter…' }}
+        />
+      </fetcher.Form>
+    </RemixFormProvider>
+  );
+};
+
+export const CustomSearchPlaceholder: Story = {
+  decorators: [
+    withReactRouterStubDecorator({
+      routes: [
+        {
+          path: '/',
+          Component: CustomSearchPlaceholderExample,
+          action: async ({ request }: ActionFunctionArgs) => handleFormSubmission(request),
+        },
+      ],
+    }),
+  ],
+  play: async ({ canvasElement, step }) => {
+    const canvas = within(canvasElement);
+    await step('Open select and see custom placeholder', async () => {
+      const regionSelect = canvas.getByLabelText('Custom Region');
+      await userEvent.click(regionSelect);
+      // The search input is rendered alongside the listbox in the portal, not inside the listbox itself.
+      const searchInput = await within(document.body).findByPlaceholderText('Type to filter…');
+      expect(searchInput).toBeInTheDocument();
+    });
+  },
+};
+
+const CreatableSelectExample = () => {
+  const fetcher = useFetcher<{ message: string; selectedRegion?: string }>();
+  const methods = useRemixForm<{ region: string }>({
+    resolver: zodResolver(z.object({ region: z.string().min(1) })),
+    defaultValues: { region: '' },
+    fetcher,
+    submitConfig: { action: '/', method: 'post' },
+  });
+  return (
+    <RemixFormProvider {...methods}>
+      <fetcher.Form onSubmit={methods.handleSubmit} className="space-y-4">
+        <Select
+          name="region"
+          label="Custom Region"
+          description="Creatable option enabled"
+          options={[...US_STATES.slice(0, 5), ...CANADA_PROVINCES.slice(0, 5)]}
+          placeholder="Select a custom region"
+          creatable
+          onCreateOption={async (input) => ({ label: input, value: input })}
+        />
+        <Button type="submit">Submit</Button>
+        {fetcher.data?.selectedRegion && (
+          <div className="mt-4 p-4 bg-gray-100 rounded-md" data-testid="submitted-region">
+            <p className="text-sm font-medium">Submitted region: {fetcher.data.selectedRegion}</p>
+          </div>
+        )}
+      </fetcher.Form>
+    </RemixFormProvider>
+  );
+};
+
+export const CreatableOption: Story = {
+  decorators: [
+    withReactRouterStubDecorator({
+      routes: [
+        {
+          path: '/',
+          Component: CreatableSelectExample,
+          action: async ({ request }: ActionFunctionArgs) => handleRegionSubmission(request),
+        },
+      ],
+    }),
+  ],
+  play: async ({ canvasElement, step }) => {
+    const canvas = within(canvasElement);
+
+    await step('Create new option when no exact match', async () => {
+      const regionSelect = canvas.getByLabelText('Custom Region');
+      await userEvent.click(regionSelect);
+      const listbox = await within(document.body).findByRole('listbox');
+      // The search input is outside the listbox container; query from the portal root
+      const input = within(document.body).getByPlaceholderText('Search...');
+      await userEvent.click(input);
+      await userEvent.clear(input);
+      await userEvent.type(input, 'Atlantis');
+
+      const createItem = await within(listbox).findByRole('option', { name: 'Create \"Atlantis\"' });
+      await userEvent.click(createItem);
+
+      await expect(canvas.findByRole('combobox', { name: 'Custom Region' })).resolves.toHaveTextContent('Atlantis');
+
+      // Submit and verify server received the created option value
+      const submitButton = canvas.getByRole('button', { name: 'Submit' });
+      await userEvent.click(submitButton);
+      await expect(canvas.findByText('Submitted region: Atlantis')).resolves.toBeInTheDocument();
+    });
+
+    await step('No creatable when exact match exists', async () => {
+      const regionSelect = canvas.getByLabelText('Custom Region');
+      await userEvent.click(regionSelect);
+      const listbox = await within(document.body).findByRole('listbox');
+      // The search input is outside the listbox container; query from the portal root
+      const input = within(document.body).getByPlaceholderText('Search...');
+      await userEvent.click(input);
+      await userEvent.clear(input);
+      await userEvent.type(input, 'California');
+
+      expect(within(listbox).queryByRole('option', { name: 'Create \"California\"' })).not.toBeInTheDocument();
+    });
+  },
+};
diff --git a/biome.json b/biome.json
@@ -53,6 +53,7 @@
         "noUndeclaredDependencies": "off",
         "useImportExtensions": "off",
         "noUnusedVariables": "off",
+        "noUnusedFunctionParameters": "off",
         "useUniqueElementIds": "off"
       }
     }
diff --git a/packages/components/src/ui/data-table-filter/components/filter-value.tsx b/packages/components/src/ui/data-table-filter/components/filter-value.tsx
@@ -136,7 +136,7 @@ export function FilterValueDisplay<TData, TType extends ColumnDataType>({
 export function FilterValueOptionDisplay<TData>({
   filter,
   column,
-  actions: _actions,
+  actions,
   locale: _locale = 'en',
 }: FilterValueDisplayProps<TData, 'option'>) {
   const options = useMemo(() => column.getOptions(), [column]);
@@ -182,7 +182,7 @@ export function FilterValueOptionDisplay<TData>({
 export function FilterValueMultiOptionDisplay<TData>({
   filter,
   column,
-  actions: _actions,
+  actions,
   locale: _locale = 'en',
 }: FilterValueDisplayProps<TData, 'multiOption'>) {
   const options = useMemo(() => column.getOptions(), [column]);
@@ -246,8 +246,8 @@ function formatDateRange(start: Date | string | number, end: Date | string | num
 
 export function FilterValueDateDisplay<TData>({
   filter,
-  column: _column,
-  actions: _actions,
+  column,
+  actions,
   locale: _locale = 'en',
 }: FilterValueDisplayProps<TData, 'date'>) {
   if (!filter) return null;
@@ -273,9 +273,9 @@ export function FilterValueDateDisplay<TData>({
 
 export function FilterValueTextDisplay<TData>({
   filter,
-  column: _column,
-  actions: _actions,
-  locale: _locale = 'en',
+  column,
+  actions,
+  locale = 'en',
 }: FilterValueDisplayProps<TData, 'text'>) {
   if (!filter) return null;
   if (filter.values.length === 0 || filter.values[0].trim() === '') return <Ellipsis className="size-4" />;
@@ -287,9 +287,9 @@ export function FilterValueTextDisplay<TData>({
 
 export function FilterValueNumberDisplay<TData>({
   filter,
-  column: _column,
-  actions: _actions,
-  locale: _locale = 'en',
+  column,
+  actions,
+  locale = 'en',
 }: FilterValueDisplayProps<TData, 'number'>) {
   if (!filter || !filter.values || filter.values.length === 0) return null;
 
@@ -654,8 +654,10 @@ export function FilterValueNumberController<TData>({
     // filter && values.length === 2
     filter && numberFilterOperators[filter.operator].target === 'multiple';
 
-  const setFilterOperatorDebounced = useDebounceCallback(actions.setFilterOperator, 500);
-  const setFilterValueDebounced = useDebounceCallback(actions.setFilterValue, 500);
+  // biome-ignore lint/suspicious/noExplicitAny: any for flexibility
+  const setFilterOperatorDebounced = useDebounceCallback(actions.setFilterOperator as any, 500);
+  // biome-ignore lint/suspicious/noExplicitAny: any for flexibility
+  const setFilterValueDebounced = useDebounceCallback(actions.setFilterValue as any, 500);
 
   const changeNumber = (value: number[]) => {
     setValues(value);
diff --git a/packages/components/src/ui/select.tsx b/packages/components/src/ui/select.tsx

Original file line number	Diff line number	Diff line change
`@@ -53,6 +53,7 @@`
`53`	`53`	`"noUndeclaredDependencies": "off",`
`54`	`54`	`"useImportExtensions": "off",`
`55`	`55`	`"noUnusedVariables": "off",`
	`56`	`+ "noUnusedFunctionParameters": "off",`
`56`	`57`	`"useUniqueElementIds": "off"`
`57`	`58`	`}`
`58`	`59`	`}`