Mui autocomplete 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.

<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()
          }
        }}
 />

 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 

Sorry for the late response. I’m getting a 404 error on the sandbox you provided. Could you check it?

I have this issue as well, and I think its the same case. It can happen when implementing an external async search. The Autocomplete component still has a value, but the options are now populated with the results from the search, which does not include the current value.

Here is a reproduction: https://codesandbox.io/s/asynchronous-material-demo-forked-q0yox?file=/demo.tsx

Steps to repro:

1. type «inter» in the Autocomplete, chose «Interstellar»
2. deselect the Autocomplete
3. select the Autocomplete, type «godfather»
4. observe console

It doesn’t repro 100% of the time, but its pretty easy to get it to happen.

Thanks for the reproduction, @markedwards. I’m reopening the issue.

I’m experiencing this problem too. Great to see that this issue is opened!

Also ran into this issue while fetching autocomplete options from the Google Maps Places API and my own backend. I tried to work around the issue by clearing out the value prop when the inputValue changed since any change in inputValue changes the options prop with new API results. This makes the warning go away but results in a clunky user behavior where it takes 2 keystrokes to start a new «search» instead of one. For some reason, the first one keystroke disappears into oblivion. (E.g. if you highlight the text and then try to replace it by typing, your first key stroke only clears the text and doesn’t place any actual letters into the TextField.) It sounds like some order of operations problem so I didn’t poke in further.

Open to suggestions for other ways to avoid the warning or if it’s okay to just to ignore it overall.

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.

I have the same Issue … boring warning

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.

In case anyone stumbles upon this issue today still, the trick for async-populated options is to add the currently selected option so that it doesn’t trigger the false positive that can happen when setting a new value while an async request changes the array of options that is provided.

const [item, setItem] = useState<ItemModel>();
const [items, setItems] = useState<ItemModel[]>([]);
const [input, setInput] = useState('');
const query = useDebounce(input, 250);

useEffect(() => {
  fetchItems(query).then((items) => setItems(items));
}, [query]);

return (
  <Autocomplete
    autoComplete
    filterSelectedOptions
    getOptionLabel={(option) => option.name}
    onInputChange={(_event, value) => setInput(value)}
    onChange={(_event, value) => setItem(value)}
    options={item ? [item, ...items] : items}
    renderInput={(extra) => <TextField {...extra} label="Name" />}
  />
);

still an issue for me. not wanting to add more state as said in @angrybacon answer, because i use react hook form mainly to control the state.

 <Controller
  name={"district"}
  control={control}
  render={({ field: { onChange, value } }) => (
    <Autocomplete
      onChange={(e, data) => onChange(data)}
      options={districts.map(({ id, name }) => ({ id, name }))}
      value={value}
      getOptionLabel={(option) => option.name}
      isOptionEqualToValue={(option, newValue) => {
        return option.id === newValue.id;
      }}
      renderInput={(params) => (
        <TextField {...params} placeholder="test" label="test" />
      )}
      onInputChange={(_evt, newValue) => setSearch(newValue)}
      inputValue={search}
    />
  )}
/>

can i just return true for isOptionEqualToValue prop? is it affect anything., didn’t find the effect so far. even still don’t get it the purpose of that prop in the first place

I’m currently struggling with this. I’m going to use this comment box as a rubber duck and maybe someone can explain what I’m doing wrong.

So… This error has made me realize I don’t entirely get what the point of the value field is anyway. As I understand it, the autocomplete component is essentially a text input and a select welded together. The onChange handler fires when the user clicks an item à la select, whereas onInputChange and inputValue are for the text input portion.

From what I can see, the both the text input and the selection set the value, which makes sense because while there’s only one value for the component, even if there’s two ways to set it.

I’ve been storing my value in a hook, and passing it back in to both value and inputValue and getting this warning (even though everything works fine). I figured it’s because value expects some item in my options array (such as an {label: string; id: string;}). So I tried storing the value separately (as the docs do indeed suggest), but that:

1. Does not suppress the warning (it just complains now that the object doesn’t match either).
2. Causes the typed input to be over-written by the last select value.

The latter I suppose can be mitigated by unsetting the «select value» when the user modifies the input text and falling back to value={inputValue} but that raises the question, «Why set it to anything besides inputValue in the first place?»

So, am I doing something wrong or is this warning truly just meaningless? I feel like I must be doing something wrong because surely the value prop is not as useless as it appears to be?

I think for now I will just use a <Select /> instead of <Autocomplete />. I’ll miss the nice filtering/instant search but I don’t really want a component like this where I can’t figure out from the documentation how it’s supposed to be used and which spews out console warnings in my production code base. 😞

As a closing note, if my intuitions are correct, I’d argue the naming of the Autocomplete props is rather misleading/confusing. The text field value should be called value and have its onChange property, and there should be another prop called onSelect or ‘onComplete` which is used for when the value is set by via autocomplete behavior.

Thoughts?

I forked the controlled input example from the documentation and tweaked it slightly, working towards what I was actually building (albeit not for Harry Potter characters).

Although the warning does not show up, there is a lot of questionable UX going on. You will notice the behavior where you delete half the name and it reappears on blur because of the odd implementation choice of having the Autocomplete have two values.

I’ve «solved» that by setting value via the onInputChange handler, which removes the need for two pieces of state, and removes the weird ambiguity between the two competing/conflicting values. But the documentation explicitly advises against this.

Of course, creating this dummy value object does make it clear why the warning shows up.

Which would bring me back to: Either the Autocomplete component should be completely re-thought (probably the «right» solution) w.r.t. multiple values and setters, OR the warning should be ditched and you can set the value to whatever you want.

The latter also does feel like a «right» choice considering entering non-specific options is kind of the whole thing that sets <Autocomplete /> apart from <Select />. If you don’t want the user to be able to type in random other text, use a <Select />, no?

Got same issue. Too bad there’s no solution yet, but glad that it’s on the radar.

I had a bit different kind of a problem that is described in this thread, but as it lands on same field I decided to post here rather to post new thread (hope that’s fine).

TL;DR

A opinion that has very minor affect on… anything. May resolve some common issues found in internet with this component.

Decription

I have MUIv5 and I use MUI Autocomplete, with Formik (with Yup) and use typescript. I’ve come into an opinion where I feel like that useAutocomplete (@mui/base/AutocompleteUnstyled/useAutocomplete.js) applies bad practices.

By the snipped code below, it states that the Autocomplete initial value can not be undefined, but rather null?
— henche, to my knowledge undefined is stated as «not set» or in validation schemes «not touched» and null is actually a defined value («someone or something have changed or set it’s value to null).

In my case this caused the form to be initialized with «undefined»… string (what the …) and bunch of error/warning messages, saying:

• Material-UI: the value provided to Autocomplete is invalid. None of the options match with ´""´.
• The getOptionLabel method of Autocomplete returned undefined instead of a string for "".

  if (process.env.NODE_ENV !== 'production') {
    if (value !== null && !freeSolo && options.length > 0) { // <-----------
      const missingValue = (multiple ? value : [value]).filter(value2 => !options.some(option => isOptionEqualToValue(option, value2)));

      if (missingValue.length > 0) {
        console.warn([`MUI: The value provided to ${componentName} is invalid.`, `None of the options match with `${missingValue.length > 1 ? JSON.stringify(missingValue) : JSON.stringify(missingValue[0])}`.`, 'You can use the `isOptionEqualToValue` prop to customize the equality test.'].join('n'));
      }
    }
  }

Curtain call

I resolved my problem by initializing form values with null and applying nullable into Yup validation schema for the fields.

Sample code:

<Field
    name="fieldName"
    component={Autocomplete}
    options={sortedfieldNameKeys}
//    getOptionLabel={(option: string) => sortedfieldNameKeys?.length > 0 ? fields[option] : "" }
    getOptionLabel={(option: string) => sortedfieldNameKeys?.length > 0 ? fields[option] : null }
    renderInput={(params: AutocompleteRenderInputParams) => (
        <MuiTextField
            {...params}
            name="fieldName"
            label={translator('fieldName')}
            variant="standard"
            helperText={touched?.fieldName && errors.fieldName && errors.fieldName}
            error={touched?.fieldName && Boolean(errors.fieldName)}
        />
    )}
    sx={{ width: '20ch', mr: 4 }}
/>
// ....
=> fields = await getFields(); // [ { "01aeed68-...", value: "Field 1" }, { "470401eb-...", value: "Field 2" },... ]
// ....
=> sortedFieldNameKeys = Object.entries(fields).map(({key, value}) => (key));
// ....
=> form = {
  ...,
  fieldName: null, // '' // undefined  ... oof
}

Is there any update on this? Still able to reproduce this issue locally. @michaldudak

I’m facing this warning everytime when I try to select a link, that I’ve provided in dropdown, with the help of paper component.
I’m sharing the Autocomplete component and the UI screenshot of the dropdown
<Autocomplete popupIcon={''} fullWidth clearOnBlur clearOnEscape sx={[ error.fullAddress ? commonClasses.fieldError : {}, onboardingStyle.searchAddressAutocomplete, ]} loading={isOnboardingFormAddressLookUpSearchLoaderActive} disableClearable={!!searchAddressValue} value={onboardingForm.fullAddress} data-testid={ON_BOARDING_TEST_CONSTANTS.ADDRESS} options={searchAddressResults} PaperComponent={(paperComponentProps) => ( <SearchAddressDropdown paperComponentProps={paperComponentProps} onboardingForm={onboardingForm} setOnboardingForm={setOnboardingForm} setIsAddressModalOpen={setIsAddressModalOpen} /> )} noOptionsText={ searchAddressValue?.length > 2 ? 'No search results found' : 'Search address..' } renderInput={(params) => ( <TextField onChange={debounceSearch} {...params} label='ADDRESS' InputProps={{ ...params.InputProps, type: 'search', }} helperText={error?.fullAddress} /> )} onChange={onOptionChange} />

For anyone who may still be running into this warning. The issue I ran into was a mislabelling of «freeSolo», with a capital «S».

I have got the same issue — getting the warning: «The value provided to Autocomplete is invalid. None of the options match with «». You can use the isOptionEqualToValue prop to customize the equality test».

Adding the final part || value === "" to isOptionEqualToValue={(option, value) => option.name === value.name || value === "" removes the warning, but then a new problem appears: all options turn colored as if all were chosen

I have multi select AutoComplete. This is the way I solve the problem:

• options: <[{ label, value, type }]>
• Turn on freeSolo, autoSelect to ignore warning
• Turn on clearOnBlur to ignore value that not [Enter] or throw selecting an option in dropdown
• Modify onChange to handle unwanted text

<Autocomplete
      freeSolo
      disabled={loading}
      multiple
      clearOnBlur
      options={options}
      getOptionLabel={(option) => option.label}
      groupBy={(option) => option.type}
      /** Help show no option dropdown, freeSolo does not show it **/
      getOptionDisabled={(option) => option.label && option.label.toLowerCase() === 'no option'}
      filterOptions={() => {
        if (!options.length) return [{ label: 'No option', value: 'No option' }];
        return options;
      }}
      value={selectedOptions}
      onChange={(event, selectedValues) => {
          // This only apply to multi select
          if (['removeOption', 'clear'].includes(reason)) {
              setSelectedOptions(selectedValues);
          }
          if (['selectOption'].includes(reason)) {
              const lastValue = [...multiValue].pop();
              const isAllow = options.some((item) => item.label === lastValue?.label);
              if (!isAllow) break;
              setSelectedOptions(multiValue);
          }
      }}
      onInputChange={(event, value) => setSearchTerm(value)}
      renderInput={(params) => (
          <TextField {...params} label="label" />
      )}
/>

Happy coding

While freesolo may work to solve this issue, it seems like a workaround for a common use case. Using multi-select with server-side search is a common pattern that shouldn’t trigger a warning.

Perhaps there should be a prop to signify «Search as you type» (as the Docs refers to it) that does not allow for free entry but does allow for items to exist in the values that don’t exist in the current options and, by default, disables filterOptions (instead of having to set filterOptions={(x) => x} as the Docs recommends).