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