MUI Autocomplete 'defaultValue' не работает при использовании с контроллером формы реакции

Question

Я пытаюсь использовать автозаполнение MUI с формой реакции. Я обернул компонент автозаполнения в React Hook Form's Controller. Когда я пытаюсь установить defaultValue на AutoComplete, это не работает, когда я пытаюсь изменить предустановленное значение, компонент Autocomplete ломается. Вот отрывок из моего кода.

<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" />
      )}
    />
  }
/>

Ссылка рабочего демонстрационного кода на песочницу находится здесь.

Answer 1

Вам следует добавить onChange подпирать Controller и вернуть выбранное значение объекта

Также вы можете реализовать getOptionSelected Автозаполнение

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" />
          )}
        />
      }
    />
  );
}