title: react-select onInputChange clears value and does not update the textbox with the value selected after pressing enter.
body: <p>I don't know whyreact-select is clearing what I am typing after the second or third character. Based on my log the state had been updated correctly. I am thinking it could be that the operations happen async but even if that were the case after the update I would expect the text on the select to be updated according to the state. Apart from that when selecting an option from the list and pressing enter it doesn't display the selection on the textbox but it does recognizes the selection as it updates the state.</p>
  
  <p>Any direction to point me to where is my error would be appreciated. </p>
  
  <p><a href="https://i.stack.imgur.com/3vqvn.png" rel="nofollow noreferrer"><img src="https://i.stack.imgur.com/3vqvn.png" alt="enter image description here"></a>
  My repo is the following on the branch (virtualizedSelectAsync)</p>
  
  <p><a href="https://github.com/itReverie/itr-react-redux-normalizr/tree/virtualizedSelectAsync" rel="nofollow noreferrer">https://github.com/itReverie/itr-react-redux-normalizr/tree/virtualizedSelectAsync</a></p>
  
  <p>My component is the following:</p>
  
  <pre><code>class Selector extends Component {
  
    componentWillMount()
     {
       this.onChange = this.onChange.bind(this);
       this.onInputChange = this.onInputChange.bind(this);
       this.dispatchSuggestions = this.dispatchSuggestions.bind(this);
     }
  
    //I update the state just when an option has been selected 
    onChange(selectedOption){
      let newValue='';
      if(selectedOption !== null){
        newValue=selectedOption.name;
      }
      this.props.actions.updateTextSuccess(newValue.toLowerCase(),
                                      this.props.questionId, 
                                      this.props.partId)
  }
  
  dispatchSuggestions(newTextValue)
  {
    //First I update the state of the text with the values I want to send to the API and provide me suggestions based on that value
    return  
         this.props.actions.updateTextSuccess(newTextValue.toLowerCase(),
                                         this.props.questionId,
                                         this.props.partId)
           .then(data =&gt; {
            //After updating the text then dispatch the action to load 
            //the suggestions
            return this.props.actions.loadSuggestions(
                  this.props.parts.get('byPartId'),
                  this.props.questionId,
                  this.props.partId)
                  .then(textUpdated=&gt;{return textUpdated;})})
  
  }
  
  
  onInputChange (newTextValue)
   {   //I just want to dispatch the suggestions after the user has typed 
       // 3 characters so the API has some context and return the 
       // necessary suggestions
       if(newTextValue.length===3 &amp;&amp; newTextValue.trim() !=="")
       {
         return Promise.resolve( this.dispatchSuggestions(newTextValue))
       }
      return newTextValue;
   }
    render () {
      let suggestions=[];
      if(this.props.part.get('suggestions').size === undefined){
        suggestions=this.props.part.get('suggestions');
      }
      else {
        suggestions=this.props.part.get('suggestions').toJS();
      }
      return (
        &lt;VirtualizedSelect style={{width:'180px'}}
          options={suggestions}
          labelKey='name'
          valueKey='name'
          value={this.props.part.toJS().text}
          onChange={this.onChange}
          onInputChange={this.onInputChange}
        /&gt;
      )
    }
  }
  </code></pre>
  
  <p>Note: I am using Virtualized select but the behaviour is the same with Select. </p>