How to override onChange handler of AutoComplete Component?

[chaitanya1019]

I tried overiding the onChange handler of AutoComplete Component, but it's not working.

<Field
              name="country"
              label="Country"
              options={countries}
              component={Autocomplete}
              onChange={e => {
                console.log(e.target.name);
              }}
            />

[gerhat]

You cannot override it because it's wired with formik's setFieldValue. I usually don't need access to the onChange event since all changes are in formik's values object. Can you share your use case?

[chaitanya1019]

The default onchange handler attached to AutoComplete component sets formiks field value to object( label and value). I want to set my formik field to just the selected option value. Also InputProps, InputLabelProps and some other props(eg:- isClearable,...) of react-select are also missing.

[zevnux]

I can confirm the same issue. When using a Select component, it returns the value key as opposed to the entire object. When using an Autocomplete component, it returns the entire object, forcing the user to parse the value out in order to use it during form submissions (that is, they have to massage the data onSubmit()). This may be confusing from a developer's view, as I would expect the Select and Autocomplete to function similarly.

[gerhat]

@chaitanya1019 @zevnux you may get the value like this:

<Field
  name="country"
  options={countries}
  component={Autocomplete}
  textFieldProps={{
    label: 'Country',
    required: true,
    variant: 'outlined',
  }}
  onChange={(_, value) => {
    console.log(value)
  }}
/>

[santhoshgudla]

@chaitanya1019 @zevnux you may get the value like this:

<Field
  name="country"
  options={countries}
  component={Autocomplete}
  textFieldProps={{
    label: 'Country',
    required: true,
    variant: 'outlined',
  }}
  onChange={(_, value) => {
    console.log(value)
  }}
/>

I also faced same issue. When I use above onChange override then after click on the out side selected field disappear from the TextField