reactjsmaterial-uireact-hook-formmui-autocomplete

How to reset MUI Autocomplete form on submit with React Hook Form?


How can I reset MUI Autocomplete form with React Hook Form on submit? Just reset() doesn't work with Autocomplete.

Codesandbox: https://codesandbox.io/s/custom-autocomplete-8dh17l?file=/src/App.tsx

export default function App() {
  const {
    handleSubmit,
    control,
    reset,
    formState: { isDirty, isValid }
  } = useForm<FormValues>({
    mode: "onChange",
    defaultValues: {
      name: "",
      dataset: []
    }
  });

  const onSubmit = (data: any) => {
    console.log("data:", data);
    reset();
  };

  return (
    <div>
      <Stack onSubmit={handleSubmit(onSubmit)}>
        <Controller
          render={({ field: { onChange } }) => {
            return (
              <CustomAutocomplete
                multiple
                getOptionLabel={(option: Option) => option.name}
                options={DATA}
                label={"name"}
                onChange={(e, options: Option[]) => onChange(options)}
              />
            );
          }}
          name="dataset"
          control={control}
          rules={{
            required: "Field is required"
          }}
        />

        <Button
          type={"submit"}
          disabled={!isDirty || !isValid}
        >
          Submit
        </Button>
      </Stack>
    </div>
  );
}

Solution

  • Try adding value to the CustomAutocomplete component. This passes the value to autocomplete field every time the value in controller gets updated

    <Controller
      render={({ field: { onChange, value } }) => {
        return (
          <CustomAutocomplete
            multiple
            getOptionLabel={(option: Option) => option.name}
            options={DATA}
            label={"name"}
            value={value}
            onChange={(e: FocusEvent, options: Option[]) =>
              onChange(options)
            }
          />
        );
      }}
      name="dataset"
      control={control}
      rules={{
        required: "Field is required"
      }}
    />