MUI Autocomplete doesn't work with react-hook-form

Question

Issue summary

I get different errors at different times. When I select a suggested option, I get the following error and warning:

Material-UI: The getOptionLabel method of Autocomplete returned undefined instead of a string for 0

Material-UI: The value provided to Autocomplete is invalid. None of the options match with 0

Plus, the option doesn't get selected and the input becomes undefined. However, when trying to choose a value a second time, it gets selected (but still shows the errors).

When I clear the input I get this error:

A component is changing the controlled value state of Autocomplete to be uncontrolled.
Elements should not switch from uncontrolled to controlled (or vice versa).
Decide between using a controlled or uncontrolled Autocomplete element for the lifetime of the component.
The nature of the state is determined during the first render, it's considered controlled if the value is not `undefined`.

Code for the autocomplete component

const AutocompleteUnit = ({control, label, name, ...rest}) => {

  return (
    <>
      <Controller
        onChange={([,data]) => data}
        name={name}
        as={
          <Autocomplete
          {...rest}
          autoHighlight
          style={{marginTop: "25px"}}
          getOptionLabel={option => option.label}
          renderInput={params => (
            <TextField
              {...params}
              label={label}
              variant="outlined"
            />
          )}
        />
        }
        control={control}
        defaultValue={rest.options[0]}
      />
</>

}

Options

const districtOptions = [
    { value: "ciutatvella", label: "Ciutat Vella" },
    { value: "gracia", label: "Gràcia" },
    { value: "eixample", label: "L'Eixample" },
    { value: "sarria", label: "Sarrià" }
  ];

Any idea on what's wrong?

derchris derchris · Accepted Answer · 2021-03-03T16:14:37

just in case some stumbles upon this: you have to use defaultValue of Autocomplete instead of the Controller

MUI Autocomplete doesn't work with react-hook-form

1 Answers