Material-ui autocomplete clear value

Using hooks on the value prop breaks the functionality of the autocomplete component ( at least for me ). Using class, and setting the local state is the same.

Luckily it is a react component, so it have a "key" prop. When the key prop changes, the component is re-rendered with the default values ( which is an empty array since nothing is selected). I used hooks in the parent component and passed the values to the key prop, whenever reset is needed.

<Autocomplete    key={somethingMeaningful} // Bool, or whatever just change it to re-render the component//...other props/>

Hope this helps!

use value in your <Autocomplete /> like this:

<Autocomplete    value={this.state.value} //insert your state key here//...other props/>

Then clear state of that key, to clear the autocomplete field value

Material UI Autocomplete onInputChange callback provides reason argument. If input has been changed by input, reason will be input and if you selected option then reason will be reset.

onInputChange={(event, newInputValue, reason) => {    if (reason === 'reset') {      setValue('')      return    } else {      setValue(newInputValue)    }  }}

setValue is useState and you can pass value state to autocomplete value property.