CODEWITHSUNDEEP
javascriptreactjsantd
Kieran Quinn
Kieran Quinn

Reputation: 1115

Clear ant design autocomplete

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

Upvotes: 2

Views: 3798

Answers (1)

Kieran Quinn
Kieran Quinn

Reputation: 1115

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>

Upvotes: 2

Related Questions