How to clear the text in a MUI Autocomplete?

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!