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

Issue

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

Codesandbox: href="https://codesandbox.io/s/custom-autocomplete-8dh17l?file=/src/App.tsx" rel="nofollow noreferrer">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"
  }}
/>

Answered By - Shakya Karunathilake
Answer Checked By - - Pedro (ReactFix Volunteer)