MUI: The value provided to Autocomplete is invalid. None of the options match with `""`

Question

When a value is entered in the input of the autocomplete component I get this warning that I can't remove... This is what my input looks like

 <Autocomplete
            id="cboAdresse"
            sx={{ width: 100 + "%", fontFamily: "Poppins Bold" }}
            getOptionLabel={(option) =>
              typeof option === "string" ? option : option.label
            }
            filterOptions={(x) => {
              return x;
            }}
            options={lstadresse}
            isOptionEqualToValue={(option, value) =>
              value.label === option.label
            }
            autoComplete
            includeInputInList
            filterSelectedOptions
            value={adresse}
            noOptionsText="Aucune adresse trouvée"
            onChange={(event, newValue) => {
              setLstAdresse(
                newValue.name ? [newValue.name, ...lstadresse] : lstadresse
              );
              setAdresse(newValue.name);
              if (newValue.name != "") {
                setVille(newValue.city);
                setCodePostal(newValue.postcode);
              }
            }}
            onInputChange={(event, newInputValue) => {
              setInputRue(newInputValue);
            }}
            renderInput={(params) => (
              <div
                ref={params.InputProps.ref}
                className="login-block__input form_input_white"
              >
                <input
                  type="text"
                  name="adresse"
                  placeholder="Adresse"
                  {...params.inputProps}
                />
              </div>
            )}
      />

We can see that I have integrated the IsOptionEqualToValue parameter without solving the problem. During my research other people have faced this problem and solved it with what I wrote with the IsOptionEqualToValue. If anyone has a solution I'm interested. Thanks in advance.

Tansy

Answer 1

in mui v5 use this

isOptionEqualToValue={(option, value) => option.value === value.value}

Callup

Thanks for your answer but this is what I already have in the topic code. I also tested as you wrote it does not work (I have no more suggestions for autocompletions) – Tansy

Answer 2

The solution is to use null to represent no value for the Autocomplete component. I have the following code in my wrapper around the Autocomplete component.

const { 
    // ... other props
    value: valueProp,
     } = props;

// ...

let value = valueProp;
if (valueProp == null || valueProp = '') {
    valueProp = null
}
return (
    <Autocomplete
        clearOnBlur
        value={valueProp}
    />
);

The clear onBlur is needed because of other issues that pop up when using null. See my comment on their github for more details

Monosome

Answer 3

my solution was, assuming CONTROLLED input:

WARNING appears:

const [dropDownValue, setDropDownValue] = React.useState<any>('');

NO WARNING, no warring appears:

const [dropDownValue, setDropDownValue] = React.useState<any>(null);

---

Binding of state to the Autocomplete to make it controlled:

        <Autocomplete
            value={dropDownValue}
            onChange={(e, newDropDownValue)=> 
            setDropDownValue(newDropDownValue)}

My options are:

[
            { label: 'The Shawshank Redemption', year: 1994 },
            { label: 'The Godfather', year: 1972 },
            { label: 'The Godfather: Part II', year: 1974 },
            { label: 'The Dark Knight', year: 2008 },
]

---

Bottom line: put NULL into the controlled state, empty OR '' will NOT work, it will give error.

Alternatively 'freeSolo' property of AutoComplete WORKS, BUT it removes the DropDown symbol / icon, so not ideal.

Ferryman

Answer 4

Use the isOptionEqualToValue attribute like below

<Autocomplete
   ...
   isOptionEqualToValue={(option, value) => (option === value || value === "")}
>
</Autocomplete>

Sinistrodextral

Answer 5

The only solution I've found is to just add an empty string to your options.

Antheridium

Your answer could be improved with additional supporting information. Please edit to add further details, such as citations or documentation, so that others can confirm that your answer is correct. You can find more information on how to write good answers in the help center. – Fumarole

Is that a good practice? I'm so close to doing this too... :'( – Wiese