[AutoComplete] Clear AutoComplete Value on click of Button

[dhavalsoni2001]

I want to store data in list with AutoComplete Component. User write text in AutoComplete Component and clicking on add Button data should stored in list and after that I want to clear AutoComplete Text.
But there is no method or properties to clear Input of AutoComplete.

Version :
0.15.0

[itsjimbo]

I got it working by using setState on the searchText property with refs as in

import AutoComplete from 'material-ui/AutoComplete';
...
 handleNewRequest(chosenRequest,idx){
        if (idx>-1)  //only allow selected items to be added
        {
            //do something with the chosenRequest, eg rest request
             setTimeout(()=>{
                    this.refs[`autocomplete`].setState({searchText:''});
                    this.refs[`autocomplete`].focus();
                }, 700);
        }
    }

and the render

render(){
 return (<AutoComplete
                       ref={`autocomplete`}
                       hintText="Enter Some Tezt..."
                       dataSource={...}
                       onNewRequest={this.handleNewRequest.bind(this)}
                       fullWidth={true}
                   />);
}

[aahan96]

Duplicate of #2615

[Stosiu]

@itsjimbo Thanks! Your code solved my problem ;)

[jaggu07]

Simple if clear button is enabled

this.refs[autocomplete ].getElementsByClassName('MuiAutocomplete-clearIndicator')[0].click();

[Sakthivelgovindan]

Hi @dhavalsoni2001,

Try this, it's working for me,

< Autocomplete inputValue={this.state.labelName} />

Refer :
https://stackoverflow.com/questions/58626031/how-to-clear-the-autocompletes-input-in-material-ui-after-an-onchange

[gowthamvbhat]

Is there any straightforward way to achieve this when using autocomplete as an uncontrolled component ?

[nihalvaria]

I had similar usecase to clear the Autocomplete component using external button,
I also tried this solution , but with this the component gets in focus and dropdown opens, I didn't want that because I had multiple Autocomplete components.

Finally I solved it by changing the key for Autocomplete component,
It forces it to remount (not the most optimal solution), hence the component resets.

[johnvonneumann7]

I got it working by using setState on the searchText property with refs as in

import AutoComplete from 'material-ui/AutoComplete';
...
 handleNewRequest(chosenRequest,idx){
        if (idx>-1)  //only allow selected items to be added
        {
            //do something with the chosenRequest, eg rest request
             setTimeout(()=>{
                    this.refs[`autocomplete`].setState({searchText:''});
                    this.refs[`autocomplete`].focus();
                }, 700);
        }
    }

and the render

render(){
 return (<AutoComplete
                       ref={`autocomplete`}
                       hintText="Enter Some Tezt..."
                       dataSource={...}
                       onNewRequest={this.handleNewRequest.bind(this)}
                       fullWidth={true}
                   />);
}

How can this be accomplished with a function component?

[jlev]

+1 to resetting the key. That's the only thing that worked for my use case

[ZeInhumane]

life is full of ups and downs