How to clear the text in a MUI Autocomplete? - reactjs

Question

I have an Autocomplete field which uses:
searchText = {this.state.searchText}
like this;
<AutoComplete
floatingLabelText='agent input'
ref='agentInput'
hintText="type response"
multiLine = {true}
fullWidth = {true}
searchText = {this.state.searchText}
onNewRequest={this.sendAgentInput}
dataSource={this.agentCommands}
/>
But when I update the this.setState({searchText: null })
it will clear the autoComplete once, but not the second time.
Not sure if this is a bug or if there's another way to reset the field.
I also tried looking for the field and adding a ref but no luck.
Filed here in case it's a bug
https://github.com/callemall/material-ui/issues/2615

Answer 1

Try also to change searchText on every input update:
onUpdateInput={this.handleUpdateInput}
This function should change searchText whenever user changes the input:
handleUpdateInput(text) {
this.setState({
searchText: text
})
}
My code looks as follows (ES6):
class MyComponent extends Component {
constructor (props) {
super(props)
this.dataSource = ['a', 'b' ,'c']
this.state = {
searchText: ''
}
}
handleUpdateInput (t) { this.setState({ searchText: t }) }
handleSelect (t) { this.setState( { searchText: '' }) }
render () {
return <AutoComplete dataSource={this.dataSource}
searchText={this.state.searchText}
onNewRequest={this.handleSelect.bind(this)}
onUpdateInput={this.handleUpdateInput.bind(this)}
/>
}
}
Here I want to clear input when user presses enter or chooses some item from the list (so I clear searchText in handleSelect) but I also change state of searchText on every input update (handleUpdateInput).
I hope it will work for you!

Answer 2

Try this :
this.setState({ searchText: "\r" });
because I think the function should test the length of the string (BUG ?)

Answer 3

For freesolo Autocomplete, you can control the inputValue of Autocomplete and set it to an empty string on demand:
const [inputValue, setInputValue] = React.useState('');
return (
<>
<Button onClick={() => setInputValue('')}>clear input</Button>
<Autocomplete
freeSolo
inputValue={inputValue}
onInputChange={(_, v) => setInputValue(v)}
options={top100Films}
renderInput={(params) => <TextField {...params} label="Movie" />}
/>
</>
);
If you also want to change the currently selected value, not just the value in the input box:
const [inputValue, setInputValue] = React.useState('');
const [value, setValue] = React.useState(null);
return (
<>
<Button
onClick={() => {
setInputValue('');
setValue(null);
}}
>
clear input
</Button>
<Autocomplete
freeSolo
value={value}
onChange={(_, v) => setValue(v)}
inputValue={inputValue}
onInputChange={(_, v) => setInputValue(v)}
options={top100Films}
renderInput={(params) => <TextField {...params} label="Movie" />}
/>
</>
);