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.

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.

• javascript
• reactjs
• material-ui
• autocomplete

5 Answers 5

in mui v5 use this

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

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

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.

Use the isOptionEqualToValue attribute like below

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

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