Autocomplete is cleared when using onChange function.

[fredarend]

I'm having difficulty using onChange in the Autocomplete component.

With the onChange function configured, after selecting an option the Autocomplete is cleared.

Based on the sandbox code available on the github homepage, it only includes the onChange in the autocomplete.

function getYear(event, value) {
  console.log(value.year);
}

...

  <Box margin={1}>
    <Field
      name="autocomplete"
      component={Autocomplete}
      options={top100Films}
      onChange={getYear}
      getOptionLabel={(option: any) => option.title}
      style={{width: 300}}
      renderInput={(params: AutocompleteRenderInputParams) => (
        <MuiTextField
          {...params}
          error={touched['autocomplete'] && !!errors['autocomplete']}
          helperText={touched['autocomplete'] && errors['autocomplete']}
          label="Autocomplete"
          variant="outlined"
        />
      )}
    />
  </Box>

I believe it cleans due to formik configuration, what would be the correct way to access the information after selection?

[bradjones1]

This may just be an opportunity for better documentation; this library does provide a default onChange function, which will be used if none is passed. The issue is that the default contains a necessary invocation of Formik's setFieldValue:

https://github.com/stackworx/formik-material-ui/blob/3915d253923c0d5224446ae26bf576e52326124d/packages/formik-material-ui-lab/src/Autocomplete.tsx#L66-L70

So you'll have to destructure the Formik params and then include a call to setFieldValue in your logic.

[bradjones1]

Refs #192 #161

[cliedeman]

@bradjones1 thanks for the investigation - I created a new issue #293