I mapped the countries in select. When I reset the select the placeholder is still the country name, but the value is reset to undefined.

const countries = [
  { label: 'France', value: 'FR' },
  { label: 'Germany', value: 'DE' },
];

const defaultValues = {
  country: undefined,
};

const Select: FC<Props> = ({
  options,
  onSelect,
  placeholder = 'Select option',
  ...props
}) => {
  const handleSelect = useCallback(
    (ev) => {
      const { value } = ev.target;
      const select = value ? options.find((opt) => opt.value === value) : null;
      onSelect(select);
    },
    [options]
  );

  return (
    <ChakraSelect
      onChange={handleSelect}
      placeholder={placeholder}
      {...props}
    >
      {options?.map((opt) => (
        <option key={opt.label} value={opt.value}>
          {opt.label}
        </option>
      ))}
    </ChakraSelect>
  );
};

export default Select;

<FormControl isInvalid={errors.country}>
  <Controller
    control={control}
    name='country'
    render={({ field: { onChange, value } }) => {
      return (
        <Select
          onSelect={onChange}
          options={countries}
          placeholder='Select country'
          value={value?.value}
        />
      );
    }}
    rules={{
      required: {
        value: true,
        message: 'Country is required',
      },
    }}
  />

Reset using react-hook-form:

reset({...defaultValues});

Here is the result after reset, value: undefined, but the placeholder is still the country name:

CodePudding user response：

It looks like the issue is that when the form is reset, the value of the Select component is not being updated. This is because the value prop of the Select component is being set to value.value, which is undefined after the form is reset.

To fix this, you could update the render prop of the Controller component to set the value prop of the Select component to the entire value object from the form's state, rather than just the value property of that object. This way, when the form is reset, the value prop of the Select component will also be reset to undefined.

Here is an example of how you could do this:

<FormControl isInvalid={errors.country}>
  <Controller
    control={control}
    name="country"
    render={({ field: { onChange, value } }) => {
      return (
        <Select
          onSelect={onChange}
          options={countries}
          placeholder="Select country"
          value={value}  // Set the value prop to the entire value object
        />
      );
    }}
    rules={{
      required: {
        value: true,
        message: "Country is required",
      },
    }}
  />
</FormControl>

After making this change, when the form is reset, the value prop of the Select component will be reset to undefined, and the placeholder will be displayed.

CodePudding user response：

You can simply set the placeholder prop to the desired default value. For example, if you want the placeholder to be "Select option" after the form is reset, you can add the following code to your Select component:

const Select: FC<Props> = ({
  options,
  onSelect,
  placeholder = 'Select option', // default placeholder value
  ...props
}) => {
  // ...

  return (
    <ChakraSelect
      onChange={handleSelect}
      placeholder={placeholder}
      {...props}
    >
      {options?.map((opt) => (
        <option key={opt.label} value={opt.value}>
          {opt.label}
        </option>
      ))}
    </ChakraSelect>
  );
};

Then, when you reset the form using react-hook-form, the placeholder in the Chakra Select will be reset to the default value of "Select option".