Type definition in reusable form field | react-hook-form

[dev-SR]

After overcoming challenges in defining TypeScript types for a reusable form field, I've managed to arrive at the following type definition. However, I'm curious if there's a more efficient or improved way to handle the typing for form fields. The current implementation is provided below. Can anyone suggest enhancements or a better approach to type these form fields?" For example, form.setValue(props.name, item.value as any); still not seems perfect.

type InputProps = Omit<React.InputHTMLAttributes<HTMLInputElement>, 'form'>;
const InputField = <TFieldValues extends FieldValues = FieldValues>({
	form,
	...props
}: InputProps & {
	label: string;
	description?: string;
	name: Path<TFieldValues>;
	form: UseFormReturn<TFieldValues>;
}) => (
	<FormField
		control={form.control}
		name={props.name}
		render={({ field }) => (
			<FormItem>
				<FormLabel>{props.label}</FormLabel>
				<FormControl>
					<Input {...props} {...field} />
				</FormControl>
				{props.description && <FormDescription>{props.description}</FormDescription>}
				<FormMessage />
			</FormItem>
		)}
	/>
);
type ComboboxDataType = {
	label: string;
	value: string;
};

const categories: ComboboxDataType[] = [
	{ label: 'Mobile', value: 'Mobile' },
	{ label: 'Book', value: 'Book' },
	{ label: 'Electronics', value: 'Electronics' },
	{ label: 'Clothing', value: 'Clothing' }
] as const;

const ComboboxField = <TFieldValues extends FieldValues = FieldValues>({
	form,
	data,
	...props
}: {
	name: Path<TFieldValues>;
	label: string;
	description?: string;
	data: ComboboxDataType[];
	form: UseFormReturn<TFieldValues>;
}) => (
	<FormField
		control={form.control}
		name={props.name}
		render={({ field }) => (
			<FormItem className='flex flex-col mt-2'>
				<FormLabel>{props.label}</FormLabel>
				<Popover>
					<PopoverTrigger asChild>
						<FormControl>
							<Button
								variant='outline'
								role='combobox'
								className={cn(
									'w-[200px] justify-between',
									!field.value && 'text-muted-foreground'
								)}>
								{field.value ? data.find((item) => item.value === field.value)?.label : props.label}
								<ChevronsUpDownIcon className='ml-2 h-4 w-4 shrink-0 opacity-50' />
							</Button>
						</FormControl>
					</PopoverTrigger>
					<PopoverContent className='w-[200px] p-0'>
						<Command>
							<CommandInput placeholder={`Search ${props.name}...`} className='h-9' />
							<CommandEmpty>{`No ${props.name} found`}</CommandEmpty>
							<CommandGroup>
								{data.map((item) => (
									<CommandItem
										value={item.label}
										key={item.value}
										onSelect={() => {
											form.setValue(props.name, item.value as any);
											form.trigger(props.name);
										}}>
										{item.label}
										<CheckIcon
											className={cn(
												'ml-auto h-4 w-4',
												item.value === field.value ? 'opacity-100' : 'opacity-0'
											)}
										/>
									</CommandItem>
								))}
							</CommandGroup>
						</Command>
					</PopoverContent>
				</Popover>

				<FormMessage />
			</FormItem>
		)}
	/>
);

Usage:

<InputField name='name' form={form} placeholder='New' label='Product Name' />
<InputField
		name='price'
		form={form}
		type='number'
		min={0}
		placeholder='0.00'
		label='Price'
		className='w-[200px]'
	/>
<ComboboxField
		form={form}
		name='category'
		data={categories}
		label='Select Category'
	/>

[JuoCode]

I'd rather not pass the form to the reusable field component, it helps simplify the types and improves component reusability, for example:

<FormField
  control={form.control}
  name={props.name}
  render={({ field }) => (
    <FormItem>
      <FormLabel>{props.label}</FormLabel>
      <FormControl>
        <SomeCombobox
          values={field.value}
          onChange={values => form.setValue(props.name, values, {/* other options */ })}
        />
      </FormControl>
      {props.description && <FormDescription>{props.description}</FormDescription>}
      <FormMessage />
    </FormItem>
  )}
/>

[AndreaBarghigiani]

Hi @JuoCode,
I've implemented a solution that's really close to yours but instead of passing only field.value I pass the entire field object and use the onChange event to update the form state.

Honestly it seems to work as expected and the form values get's updated as well, do you see something against this approach?

Edit

Had to change to pass only field.value and field.onChange to the component because wasn't able to satisfy TS requirements 😊

'use client';

const ComboboxField = ({
  value,
  onChange,
  terms,
  notFound,
  placeholder,
}: {
  value: string;
  onChange: (value: string) => void;
  terms: Term[];
  notFound: string;
  placeholder: string;
}) => {
  const [open, setOpen] = React.useState(false);

  return (
    <Popover open={open} onOpenChange={setOpen}>
      <PopoverTrigger asChild>
        <FormControl>
          <Button
            variant='search'
            role='combobox'
            className={cn('w-[200px] justify-between', !value && 'opacity-50')}
          >
            {value
              ? terms.find((term) => term.value === value)?.label
              : placeholder}

            <Icon
              icon='DoubleChevron'
              iconClasses='h-4 w-4'
              containerClasses='px-0'
            />
          </Button>
        </FormControl>
      </PopoverTrigger>

      <PopoverContent className='w-[200px] p-0'>
        <Command>
          <CommandInput placeholder={placeholder} className='h-9' />
          <CommandEmpty>{notFound}</CommandEmpty>
          <CommandGroup>
            {terms.map((term) => (
              <CommandItem
                key={term.value}
                value={term.value}
                onSelect={() => {
                  onChange(term.value);
                  setOpen(false);
                }}
              >
                {term.label}
                <Icon
                  icon='Check'
                  containerClasses={cn(
                    'px-0 ml-auto',
                    value === term.value ? 'opacity-100' : 'opacity-0'
                  )}
                />
              </CommandItem>
            ))}
          </CommandGroup>
        </Command>
      </PopoverContent>
    </Popover>
  );
};

export default ComboboxField;

Previous implementation

// combobox-field.tsx
'use client';

const ComboboxField = ({
  field,
  terms,
  notFound,
  placeholder,
}: {
  field: ControllerRenderProps;
  terms: Term[];
  notFound: string;
  placeholder: string;
}) => {
  const [open, setOpen] = React.useState(false);

  return (
    <Popover open={open} onOpenChange={setOpen}>
      <PopoverTrigger asChild>
        <FormControl>
          <Button
            variant='search'
            role='combobox'
            className={cn(
              'w-[200px] justify-between',
              !field.value && 'opacity-50'
            )}
          >
            {field.value
              ? terms.find((term) => term.value === field.value)?.label
              : placeholder}

            <Icon
              icon='DoubleChevron'
              iconClasses='h-4 w-4'
              containerClasses='px-0'
            />
          </Button>
        </FormControl>
      </PopoverTrigger>

      <PopoverContent className='w-[200px] p-0'>
        <Command>
          <CommandInput placeholder={placeholder} className='h-9' />
          <CommandEmpty>{notFound}</CommandEmpty>
          <CommandGroup>
            {terms.map((term) => (
              <CommandItem
                key={term.value}
                value={term.value}
                onSelect={() => {
                  field.onChange(term.value);
                  setOpen(false);
                }}
              >
                {term.label}
                <Icon
                  icon='Check'
                  containerClasses={cn(
                    'px-0 ml-auto',
                    field.value === term.value ? 'opacity-100' : 'opacity-0'
                  )}
                />
              </CommandItem>
            ))}
          </CommandGroup>
        </Command>
      </PopoverContent>
    </Popover>
  );
};

export default ComboboxField;

I haven't done anything special, just customized a bit the Form Combobox example from shadcn/ui docs.

[fribeirohx]

Hey everyone, I'm trying to use the component created here and I'm getting numerous re-renders when I click the submit button even with a simple console.log(data). Are you experiencing this too? As the form becomes more complex and larger, these re-renders directly affect the submit.