MUI Autocomplete's 'defaultValue' not working when used with Controller of react-hook-form

user_4719990 0
Viewed 1507

I am trying to use MUI's Autocomplete with react-hook-form. I have wrapped an Autocomplete component in React Hook Form's Controller. When I try to set defaultValue to AutoComplete it does not work, when I try to change the preset value the Autocomplete component breaks. Here is the snippet from my code.

<Controller
  name="combo-box-demo"
  control={control}
  defaultValue={top100Films.find(film => film.year === selectedFilmYear)}
  as={
    <Autocomplete
      id="combo-box-demo"
      options={top100Films}
      getOptionLabel={option => option.title}
      style={{ width: 300 }}
      renderInput={params => (
        <TextField {...params} label="Combo box" variant="outlined" />
      )}
    />
  }
/>

Sandbox link of working demo code is here.

react-hook-form material-ui reactjs
1 Answers

You should add an onChange prop on the Controller and return the selected object value

Also you can then implement getOptionSelected AutoComplete

export default function ComboBox() {
  const { control } = useForm({});
  const [selectedFilmYear, setSelectedFilmYear] = React.useState(1994);
  return (
    <Controller
      name="combo-box-demo"
      control={control}
      defaultValue={top100Films.find(film => film.year === selectedFilmYear)}
      onChange={([val, obj]) => obj}
      as={
        <Autocomplete
          id="combo-box-demo"
          options={top100Films}
          getOptionSelected={(obj, newval) => obj.name === newval.name}
          getOptionLabel={option => option.title}
          style={{ width: 300 }}
          renderInput={params => (
            <TextField {...params} label="Combo box" variant="outlined" />
          )}
        />
      }
    />
  );
}

Edit FORM VALUES

user_59281860
Related