How to clear the text in a MUI Autocomplete?
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
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!
Related Questions
- → Import statement and Babel
- → should I choose reactjs+f7 or f7+vue.js?
- → Uncaught TypeError: Cannot read property '__SECRET_DOM_DO_NOT_USE_OR_YOU_WILL_BE_FIRED' of undefined
- → .tsx webpack compile fails: Unexpected token <
- → React-router: Passing props to children
- → ListView.DataSource looping data for React Native
- → React Native with visual studio 2015 IDE
- → Can't test submit handler in React component
- → React + Flux - How to avoid global variable
- → Webpack, React & Babel, not rendering DOM
- → How do I determine if a new ReactJS session and/or Browser session has started?
- → Alt @decorators in React-Native
- → How to dynamically add class to parent div of focused input field?