Clear ant design autocomplete

user_2523327 0
Viewed 2733

I have an Ant Design Autocomplete component in the header of my page (used for searching). I want to clear the text every time there is a route change. This is the code for the Autocomplete:

<AutoComplete
  dataSource={options}
  onSelect={this.onSelectOption}
  onSearch={this.search}
  labelInValue
  optionLabelProp="option"
  defaultActiveFirstOption={false}
>
  <Input
    ref={input => {
      this.searchBar = input;
    }}
    onPressEnter={e => this.goTo(e)}
  />
</AutoComplete>

I've tried using the value property of the autocomplete and setting it in state but nothing happens. Also tried setting the value in the child Input box but again nothing happens there either. Also tried doing this.searchBar.value = "test"; but nothing.

Notes: - I'm using ref and and Input child component because I need to be able to set focus dynamically as well as call the onPressEnter

antd reactjs javascript
1 Answers

I figured it out. I assumed the Autocomplete value was a simple string but its actually an object with this structure:

{ key: '', label:'' }

Before when I tried to use the value property, I was setting a variable with undefined or blank string. So now instead, do this:

<AutoComplete
  dataSource={options}
  onSelect={this.onSelectOption}
  onSearch={this.search}
  labelInValue
  onFocus={() => this.setState({ focus: true })}
  onBlur={() => {
    this.setState({
      focus: false,
      searchInput: { key: undefined, label: undefined }
    });
  }}
  value={this.state.searchInput}
  onChange={e => this.setState({ searchInput: e })}
>
  <Input
    ref={input => {
      this.searchBar = input;
    }}
    onPressEnter={e => this.goTo(e)}
  />
</AutoComplete>
user_25233270
Related