Formik with Material-ui AutoComplete

[mikeymop]

I am trying to implement an Autocomplete field into my Formik form, however I cannot get the touched property to fire on the autocomplete.

I have tried using the <Autocomplete /> component straight up and also tried wrapping it in the <Field /> component from Formik.

<Formik
      initialValues={{
        name: '',
        ...
       autocomplete: '',
      }}
...
>
{({ dirty, errors, isSubmitting, touched, values }) => console.log(JSON.stringify(touched) || (
...
<Field
  component={Autocomplete}
  options={options.map(({ label }) => label)}
  sx={{ width: 300 }}
  onChange={(e, value) => onChange(value)}
  renderInput={(params) => (
    <TextField
      {...params}
      name="autocomplete"
      id="autocomplete"
      label="Autocomplete"
      error={Boolean(touched.autocomplete && errors.autocomplete)}
      helperText={touched.autocomplete && errors.autocomplete}
   />
  )}
/>

Should we by binding to the Autocomplete component itself or to the TextField inside of the autocomplete?

[mikeymop]

I ended up getting this to work.
You need to pass formik's handleBlur into the Autocomplete's onBlur prop.

[Edison-Costa]

I had same problem. How can I do that?

[mikeymop]

Hey Edison-Costa,
Its been a while since I've touched this code.
I'll take a look tomorrow and try to anonymize a snippet for you to work from.

[Edison-Costa]

Thanks a lot, mikeymop.

I'm stuck more than a week with this issue.I've been searching in everywhere and not found a solution. I'm new with ReactJS and Formik. I created an app for study case with MERN, Material UI, Formik and Yup. My problem is with a field in Material UI Autocomplete and Formik. A validation with Yup is ok with this field, but touched property is always as undefined. This way, the error message is never diplayed. I tried force touched property to true, but also don't had success.

Below you could see the two files I'm working on. They are a jsx files. I rename both of them to txt to upload purpose:

P.S.: Some part of the code is in brazilian portuguese, so relax because these parts do not interfere with the code as a whole, since they are essentially in the text of the error messages and the field labels.

CategoryTags.txt
Write.txt

[mikeymop]

Okay so here are the key pieces that make AutoComplete work for me.
First off, when we get the data that drives our AC from the backend, it comes in as a list of objects. Ie: Array<{ id: number, ...}>

Our AC drives a TextField which can only display a string.
Our state tracks the entire array.
eg const [dataAC setDataAC] = useState([]). This is what we pass into our AC component.

This will throw an error because the AC will set it's value to whatever is in the array. Since we're using objects it would set value to { id: 1, ...}.
I use getOptionsLabel to pass a function that gets a display value out of these objects. Eg: getoptionsLabel={(option) => option.name || ''} this what the TextField will display. Making this resistant to null by adding a default value is important.

Despite this, the onChange will still pass the object through { id: 1, ...}.

In the AC renderProp I pass in the AC props and the field from option that I want.

In our formik render prop we pass in many of the formik features, but you likely would care about the following to drive the auto complete.
The full example is as follows:

{({ dirty, errors, handleBlur, touched, values, setFieldValue }) => (
<div>
  ...
  <AutoComplete
    options={(dataAC.length > 0) ? dataAC : []} // part of state that holds Autocomplete options
    getOptionLabel={(option) => option.name || ''}
    value={values.fieldName} // the part of state what holds the user input
    onChange={(_, value) => setFieldValue('fieldName', value || {})}
    onBlur={handleBlur} // so formik can see the forms touched state
    renderInput={(params) => (
      <TextField
        {...params}
        name="fieldName"
        id="fieldName"
        value={values.fieldName}
        onBlur={handleBlur}
        error={touched.fieldName && errors.fieldName
        helperText={touched.fieldName && errors.fieldName
      />
    )
    ...
  />
</div>
)

The Yup validation will also need to know this is an object because it will be reading the state from values.fieldName which would be { id: 1, ...} despite us extracting a string in getOptionLabel.

You likely only have to validate on the object properties that you care about for your form submission. Lets say thats {id: number} in our object which is {id: 1, name: "value"}.

The Yup would look something like this:

...
  fieldName: Yup
    .object().shape({
      id: Yup.number.min(1).required("You must select one of the valid options")
    })
  ...