How set auto complete to empty

[bobiblazeski]

I have a drop down representing the countries and auto complete representing the cities.
When I change country I want auto complete to be empty no matter was there previously.
Currently
How to achieve that ?

 // My render
  render: function() {
    return (
      <div className="form-field">
        <label className="form-field__label">Location</label>
        <div className="form-field__value">
          <div className="selectcontainer">
            <select className="input-select"
                ref='country'
                value={this.props.country}
                onChange={this.onCountry}>
              {countries.map(function(d){
                return (<option key={d.code}  value={d.code}>{d.name}</option>);
              })}
            </select>
          </div>
          (<Autocomplete
             ref="city"
             defaultValue={this.props.city} 
             getItemValue={R.identity}
             onChange={this.onChange}
             onSelect={this.onChange}
             items={this.props.cities}
             renderItem={function (city) {
               return (<div key={city} >{city}</div>);
             }} />)
        </div>
      </div>
    );
  }

[thomasboyt]

I made a fork that uses a controlled value prop instead of an initialValue to achieve this. Not tested in the slightest though, so can't guarantee if this works in all cases :)

[bobiblazeski]

Thanks, will check it out.

[akaashanky]

Definitely not the most elegant way to do it, but by assigning a ref to the Autocomplete component, you can get access to its setState method. After which, you can modify the value field of the state as you see fit.

this.refs.yourRef.setState({value: ''});

Again, this is a terrible way to get the job done, but can be used until we have API support.

[CMTegner]

I just created a PR which removes internal tracking of value entirely. This probably won't be to everyone's taste, but it changes the behaviour to be closer to that of native input elements. The downside is that you need to track the input value manually, but chances are you're already doing this, so in most cases you'll only need to swap initialValue with value.