[Autocomplete] The value provided to Autocomplete is invalid. (with the installed isOptionEqualToValue)

Duplicates

• I have searched the existing issues

Latest version

• I have tested the latest version

Current behavior 😯

I get an «value provided to Autocomplete is invalid» error:

None of the options match with `{"id":18877,"YearFrom":2002,"YearTo":2005,"Make":"Hyundai","Model":"Getz","Generation":"I (2002—2005)","FuelType":"Бензин","DriveType":"Передний","Transmission":"Автомат","Modification":"1.4 AT (97 л.с.)","Power":97,"EngineSize":"1.4","BodyType":"Хетчбэк","Doors":"5"}`.
You can use the `isOptionEqualToValue` prop to customize the equality test.

Expected behavior 🤔

Well, if i use the isOptionEqualToValue={(option, value) => option.id === value.id}, the expected behavior is that I shouldn’t get an error.

Steps to reproduce 🕹

Steps:

1. Use Autocomplete:

<Autocomplete
        multiple
        fullWidth
        filterSelectedOptions
        defaultValue={defaultValues}
        options={options}
        isOptionEqualToValue={(option, value) => option.id === value.id}
        getOptionLabel={(option: ICar) =>
          `(${option.id}) 
          ${option.Make} ${option.Model} ${option.Generation} 
          ${option.EngineSize} л ${option.FuelType?.toLowerCase()} ${option.Power} л.с. – ${option.Transmission?.toLowerCase()} ${option.DriveType?.toLowerCase()} привод
          `
        }
        renderInput={(params: AutocompleteRenderInputParams) => <TextField {...params} label={'Применяемость'} />}
        renderOption={(props, option: ICar) => {
          return (
            <li {...props}>
              {option.Make} {option.Model} {option.Generation} {option.EngineSize} л {option.FuelType?.toLowerCase()} {option.Power} л.с. – {option.Transmission?.toLowerCase()} {option.DriveType?.toLowerCase()} привод
            </li>
          )
        }}
        onChange={(_, value) => onChange(value)}
        onInputChange={(event, value) => {
          if (value && value.length >= 3) {
            search(value).finally()
          }
        }}
 />

1. The defaultValue is also a type Array<ICar>
2. I get an error with defaulValue options only

Context 🔦

No response

Your environment 🌎

`npx @mui/envinfo`

 System:
    OS: macOS 12.0.1
  Binaries:
    Node: 16.9.1 - /usr/local/bin/node
    Yarn: 1.22.4 - /usr/local/bin/yarn
    npm: 6.14.6 - ~/node_modules/.bin/npm
  Browsers:
    Chrome: 96.0.4664.45
    Edge: Not Found
    Firefox: 94.0.1
    Safari: 15.1
  npmPackages:
    @emotion/react: ^11.4.1 => 11.4.1 
    @emotion/styled: ^11.3.0 => 11.3.0 
    @mui/core:  5.0.0-alpha.50 
    @mui/icons-material: ^5.0.3 => 5.0.3 
    @mui/material: ^5.0.3 => 5.0.3 
    @mui/private-theming:  5.0.1 
    @mui/styled-engine:  5.0.1 
    @mui/styles:  5.0.1 
    @mui/system:  5.0.3 
    @mui/types:  7.0.0 
    @mui/utils:  5.0.1 
    @mui/x-data-grid: ^5.0.0-beta.3 => 5.0.0-beta.3 
    @types/react: ^17.0.20 => 17.0.20 
    react: ^17.0.2 => 17.0.2 
    react-dom: ^17.0.2 => 17.0.2 
    typescript: ^4.4.3 => 4.4.3 

[bsides]

Could we please get an option to turn off the warning completely? At this stage it’s causing a lot of noise in tests and, as reported, it’s not warning anything useful.

[michaldudak]

Apparently, at this point, the warning causes more confusion than assistance. If anyone is willing to investigate if this warning can be disabled for cases of async loading without much hassle, then feel free to grab this issue.

I’m also considering removing the warning altogether, but let’s try the less destructive option first.