React material UI autocomplete is not working with the formik

Question

I have this code snippet, which is written by someone else.

 <FormControl className={classes.formControl}>
                            <InputLabel id="combo-box-demo">
                              {values.type === "forAllCustomers" ? "" : ""}
                            </InputLabel>
                           
                            <Autocomplete
                              id="combo-box-demo"
                              name="customerId"
                              onBlur={handleBlur}
                              onChange={handleChange}
                              value={values.customerId}
                              options={agents}
                              getOptionLabel={(option) => option.name}
                              disabled={values.type === "forAllCustomers"}
                              renderTags={(value, getTagProps) => {
                                filteredAgents(values.type).map(
                                  (option, agentId) => (
                                    <Chip
                                      variant="outlined"
                                      label={option.name}
                                      // size="small"
                                      {...getTagProps({ agentId })}
                                    />
                                  )
                                );
                              }}
                              renderInput={(params) => (
                                <TextF
                                  {...params}
                                  variant="outlined"
                                  label="Customer"
                                  placeholder="Select"
                                  name="agentId"
                                />
                              )}
                            />
                          </FormControl>

Here we load bunch of agents. If user pick one agent, that agents id should set as the customerId.

Here we use formik, so onBlur={handleBlur} onChange={handleChange} is controlled by the formik.

I tried by setting value to values.customerId But it seems not working and also I am getting an error in the console saying

index.js:1 Material-UI: The getOptionLabel method of Autocomplete returned undefined instead of a string for "".

How do I fix this issue?

Anyhelp!

Thanks in advance. =)

Answer 1

See, the signature of the function onChange of AutoComplete is:

function(event: object, value: T | T[], reason: string) => void

However, signature of handleChange of Formik is

handleChange: (e: React.ChangeEvent<any>) => void

The problem is that simply passing onChange={handleChange} will not do what you think.

See, if you put, before the return statement a console.log(values), you'll see your initialValues object. However, a change in the Autocomplete will fill this object with strange combo-box-demo-option-0 1, 2 and so on. This is because how the Autocomplete component handles the combobox and the name and id properties. According to Formik, handleChange will look for the name or id to operate, and none have the correspondence you want.

Enough said, to fix your problem, you have to use another method provided by Formik: setFieldValue

Your Autocomplete should look something on the lines of:

<Autocomplete
  id="combo-box-demo"
  name="customerId"
  onChange={(e, v) => {
    setFieldValue("name", v?.name || "");
    setFieldValue("customerId", v?.id || "");
  }}
  value={values}
  options={agents}
  getOptionLabel={(option) => option.name || ''}
  style={{ width: 300 }}
  renderInput={(params) => (
    <TextField {...params} label="Combo box" variant="outlined" />
  )}
/>;

You will not need the useState because you are not handling yourself any state changes. A regular javascript object will be enough.

Answer 2

Please check the agents you are getting. There might be an issue with your agents data coming from API RESPONSE or from anywhere else. According to Material-UI, the parameter you pass to options should be in an Array but your one might be an Object.

Please convert the Data type of agents to Array instead of Object if it is not in an Array and it will work!

               <Autocomplete
                 id="combo-box-demo"
                 name="customerId"
                 onBlur={handleBlur}
                 onChange={handleChange}
                 value={values.customerId}
                 options={agents} //This should be in An Array
                 getOptionLabel={(option) => option.name} //Then access name
                 disabled={values.type === "forAllCustomers"}
                 />

Please check the Official Docs of Material-UI https://material-ui.com/components/autocomplete/