Material-ui Autocomplete warning The value provided to Autocomplete is invalid - reactjs

Question

I am working with React and material-ui.. I just realize i have a warning with the Autocomplete component when i try to submit the form, so i tried to do something really basic just like in the documentation:
let Form = props => {
return(
<form noValidate onSubmit={handleSubmit} >
<Autocomplete
id="combo-box-demo"
options={[{id:1,name:"test"},{id:2, name:"test2"}]}
getOptionLabel={(option) => option.name}
style={{ width: 300 }}
renderInput={(params) => <TextField {...params} label="Combo box" variant="outlined" />}
/>
and when i try to submit the form i get the following error:
Material-UI: The value provided to Autocomplete is invalid.
None of the options match with {"id":1,"name":"test"}.
You can use the getOptionSelected prop to customize the equality test.
I also realize that if i set the options in the state of the component there is no warning (just when they are set like a constant). So i wonder if some of you have any idea of this behavior? thank you so much in advance.

Answer 1

Basically the reason why you get the warning is a default implementation of getOptionSelected in version 4.x.x:
getOptionSelected = (option, value) => option === value
In your case, selecting a value the following comparison happens:
// option === value:
{id:1, name:"test"} === {id:1, name:"test"} // false
Obviously, it can be true in some circumstances. In this particular case, it's false because of objects pointing to the different instances.
Solution! You have to overwrite getOptionSelected implementation:
<Autocomplete
getOptionSelected={(option, value) => option.id === value.id}
...otherProps
/>
[Update]
Note, in version 5.x.x the prop was renamed:
- getOptionSelected={(option, value) => option.id === value.id}
+ isOptionEqualToValue={(option, value) => option.id === value.id}

Answer 2

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

Answer 3

Also when you want to build a searcher where value you write is not necesary the same as the options you can set freeSolo to true and the warning will disapear

Answer 4

This Worked,
getOptionSelected={(option, value) => option.value === value.value}
https://github.com/mui-org/material-ui/issues/18514#issuecomment-606854194

Answer 5

Following up on elVengadors Answer:
When you want to build a searcher where the value you type in the box (the inputValue) is not necessarily one of the provided options you can set freeSolo to true.
This will stop the warning message from being displayed.
The need for this might arise if you are creating a component that allows for asynchronous querying of an API. This would cause the value of options to change based on the response from the API, but options that have already been selected before changing the inputValue to query the API may not be included in this new list of options.
In the Autocomplete Component Documentation, freeSolo is described as:
If true, the Autocomplete is free solo, meaning that the user input is not bound to provided options.
Bonus
Setting freeSolo to true will remove the pop-up button (the drop-down arrow on the right side of the Autocomplete component). To retain this button, you should also add forcePopupIcon={true}.

Answer 6

I had same problem after adding getOptionSelected error gone.
Error:
<Autocomplete
fullWidth={true}
label={'Location'}
margin={'noraml'}
multiple={false}
name={'location'}
value={formValues.location === '' ? {label: ''} : {label: formValues.location}}
options={location}
ref={locationRef}
onChange={useCallback((e, v) => handleInputChange(e, v))}
/>
Solution: getOptionSelected property added
<Autocomplete
fullWidth={true}
label={'Location'}
margin={'noraml'}
multiple={false}
name={'location'}
getOptionSelected={useCallback((option, value) => option.value === value.value)} // added
value={formValues.location === '' ? {label: ''} : {label: formValues.location}}
options={location}
ref={locationRef}
onChange={useCallback((e, v) => handleInputChange(e, v))}
/>

Answer 7

I think you should not use <form> to wrap AutoComplete component. You should set value for AutoComplete and use a function to handle on click button to submit.
Try this:
let Form = props => {
const [value, setValue] = useState({})
const handleOnSubmit = (value) => {
setValue(value)
...
}
return(
<div>
<Autocomplete
id="combo-box-demo"
value={value}
options={[{id:1,name:"test"},{id:2, name:"test2"}]}
getOptionLabel={(option) => option.name}
style={{ width: 300 }}
renderInput={(params) => <TextField {...params} label="Combo box" variant="outlined" />}
/>
<Button onClick={() => handleOnSubmit(value)}>Submit</Button>
</div>
)
}