reactjsmaterial-uiformikmui-autocomplete

Material UI Autocomplete change selected option when another field changes


I have two fields with Material UI and Formik, a normal TextField and Autocomplete field. I need select an option on Autocomplete when TextField changes, how do this?

In formik it's all ok, the values sent correct data, but autocomplete do not change to correct value.

Example: https://codesandbox.io/s/compassionate-river-f32btt?file=/src/demo.js


Solution

  • The options property is an array but the value is represented by a string. You need to pass a function to the isOptionEqualToValue property that the AutoComplete component will use to figure out which item in the array of items matches the current value.

    You also need to move the value property out of the text field and pass it directly to the autocomplete so that it can manage its own value.

    <Autocomplete
      filterSelectedOptions
      id="estado"
      name="estado"
      options={states}
      clearText="Apagar"
    
      // Add the following props
      isOptionEqualToValue={(option, value) => option.value === value}
      value={formik.values.estado}
    
      renderInput={(params) => (
        <TextField
          {...params}
          error={Boolean(formik.errors.estado)}
          helperText={formik.errors.estado}
        />
      )}
      onChange={(e, newValue) => {
        formik.handleChange({
          target: { name: "estado", value: newValue.value },
        });
      }}
    />;