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

version 5.0

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

This Worked,

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

https://github.com/mui-org/material-ui/issues/18514#issuecomment-606854194

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}

Related