AutoComplete Material UI getOptionSelcted warning

Question

I am using the Autocomplete component in material-ui/lab What I have done is checking if there is already a value defined by the user. E.g. the user may edit the input in a modal, then pre-filling the autocomplete with user's selected options)

In this case, I am passing the value from the record, but it is issuing me the following warning.

react_devtools_backend.js:2430 Material-UI: The value provided to Autocomplete is invalid.
None of the options match with `""`.
You can use the `getOptionSelected` prop to customize the equality test. 
    at Autocomplete (http://localhost:3000/static/js/0.chunk.js:165607:35)
    at WithStyles (http://localhost:3000/static/js/0.chunk.js:169077:31)
    at div
    at Grid (http://localhost:3000/static/js/0.chunk.js:7674:35)
    at WithStyles (http://localhost:3000/static/js/0.chunk.js:169077:31)
    at GridItem (http://localhost:3000/static/js/main.chunk.js:31989:24)
    at div
    at Grid (http://localhost:3000/static/js/0.chunk.js:7674:35)
    at WithStyles (http://localhost:3000/static/js/0.chunk.js:169077:31)
    at GridContainer (http://localhost:3000/static/js/main.chunk.js:31924:24)
    at div
    at CardBody (http://localhost:3000/static/js/main.chunk.js:31108:25)
    at div
    at Card (http://localhost:3000/static/js/main.chunk.js:30960:25)
    at form
    at Formik (http://localhost:3000/static/js/0.chunk.js:194461:19)
    at div
    at DialogContent (http://localhost:3000/static/js/0.chunk.js:4563:23)
    at WithStyles (http://localhost:3000/static/js/0.chunk.js:169077:31)
    at div
    at Paper (http://localhost:3000/static/js/0.chunk.js:14058:23)
    at WithStyles (http://localhost:3000/static/js/0.chunk.js:169077:31)
    at div
    at Transition (http://localhost:3000/static/js/0.chunk.js:257938:30)
    at Slide (http://localhost:3000/static/js/0.chunk.js:16624:24)
    at Transition
    at Unstable_TrapFocus (http://localhost:3000/static/js/0.chunk.js:21834:24)
    at div
    at Portal (http://localhost:3000/static/js/0.chunk.js:15142:24)
    at Modal (http://localhost:3000/static/js/0.chunk.js:12423:83)
    at Dialog (http://localhost:3000/static/js/0.chunk.js:4130:29)
    at WithStyles (http://localhost:3000/static/js/0.chunk.js:169077:31)
    at EducationEditModal (http://localhost:3000/static/js/main.chunk.js:46083:19)
    at ConnectFunction (http://localhost:3000/static/js/0.chunk.js:248523:75)
    at EducationSection (http://localhost:3000/static/js/main.chunk.js:47448:17)
    at ConnectFunction (http://localhost:3000/static/js/0.chunk.js:248523:75)
    at div
    at Grid (http://localhost:3000/static/js/0.chunk.js:7674:35)
    at WithStyles (http://localhost:3000/static/js/0.chunk.js:169077:31)
    at GridItem (http://localhost:3000/static/js/main.chunk.js:31989:24)
    at div
    at Grid (http://localhost:3000/static/js/0.chunk.js:7674:35)
    at WithStyles (http://localhost:3000/static/js/0.chunk.js:169077:31)
    at GridContainer (http://localhost:3000/static/js/main.chunk.js:31924:24)
    at div
    at div
    at div
    at ProfilePage (http://localhost:3000/static/js/main.chunk.js:43441:25)
    at ConnectFunction (http://localhost:3000/static/js/0.chunk.js:248523:75)
    at Route (http://localhost:3000/static/js/0.chunk.js:250658:29)
    at AuthRoute (http://localhost:3000/static/js/main.chunk.js:38633:28)
    at Switch (http://localhost:3000/static/js/0.chunk.js:250860:29)
    at Router (http://localhost:3000/static/js/0.chunk.js:250293:30)
    at App (http://localhost:3000/static/js/main.chunk.js:105:86)
    at PersistGate (http://localhost:3000/static/js/0.chunk.js:261313:5)
    at Provider (http://localhost:3000/static/js/0.chunk.js:248236:20)

This is my autocomplete component

<Autocomplete
  options={countryList}
  onBlur={handleBlur}
  value={
    countryList.filter((item) => {
      return item.countryId === values.countryId;
    })[0] || ""
  }
  getOptionSelected={(option, value) =>
    option.countryId === value.countryId
  }
  getOptionLabel={(option) =>
    option.countryName ? option.countryName : ""
  }
  onChange={(event, value) => {
    if (value) {
      setFieldValue("countryId", value.countryId);
    } else {
      setFieldValue("countryId", "");
    }
  }}
  id="countryId"
  name="countryId"
  renderInput={(params) => (
    <TextField {...params} label={"Country"} />
  )}
/>

The question is how to remove this getOptionSelected warning. I am using getOptionSelected to check if the country id matches the options.

Although it is not an error and just a warning, it seems like it is affecting the system speed.

Thanks in advance

mertinop mertinop · Accepted Answer · 2021-02-08T18:48:50

The problem relies on your fallback to "":

countryList.filter((item) => {
  return item.countryId === values.countryId;
})[0] || ""

The error you're getting is that when the value is "" None of the options match with "" because it will try to run getOptionSelected against "".

getOptionSelected={(option, value) =>
  option.countryId === value.countryId // Here, option is ""
}

AutoComplete Material UI getOptionSelcted warning

1 Answers