textbox input clears after selecting a value from the options using redux and onInputChange returns empty even if returning the value.

Using redux and react-select the input text is cleared in the following two scenarios:

• After typing two or three characters the input text gets cleared
• Pressing enter in one of the list options

I am using react and redux with an immutable state . I am not sure if that could affect but mentioning it just in case. When I click on the option list it does update the state and the textbox correctly.

At the beginning I though it could be related to async calls but I do not think that could affect as I am leaving redux deal with it and in the component I display whatever the properties have. Debugging my issue, I can see that the state is being updated but the input text for some reason does not display what the state has. I am happy to contribute with a PR if needed, I just need some sort of direction on where could the error be happening.

It seems that something apart from my intention is calling the interceptor onInputChange . If I set a log it comes as empty despite the fact that I am always returning the value sent. Moreover, when pressing enter in the list of options it updates the state but does not display the text in the select textbox.

class Selector extends Component {

componentWillMount()
 {
   this.onChange = this.onChange.bind(this);
   this.onInputChange = this.onInputChange.bind(this);
   this.dispatchSuggestions = this.dispatchSuggestions.bind(this);
 }

 onChange(selectedOption){
    let newValue='';
    if(selectedOption !== null){
      newValue=selectedOption.name;
    }
    this.props.actions.updateTextSuccess(newValue.toLowerCase(),
                                    this.props.questionId, this.props.partId)
}

async dispatchSuggestions(newTextValue)
{
  //First update the text so the api can take the first characters that we are looking for in the options
  let updatingText= await this.props.actions.updateTextSuccess(newTextValue,
                                       this.props.questionId,
                                       this.props.partId);
//dispatch the options 
  let updatingSuggestions=await this.props.actions.loadSuggestions(
                this.props.parts.get('byPartId'),
                this.props.questionId,
                this.props.partId);

return updatingText;
}

 async onInputChange (newTextValue)
 {
     //when the user types the third character dispatch an action to load the options and return the 
    //newTextValue
     if(newTextValue.length===3 && newTextValue.trim() !=="")
     {
       return await 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(); //toJS because my state is immutable
    }
    return (
      <Select style={{width:'180px'}}
        options={suggestions}
        labelKey='name'
        valueKey='name'
        value={this.props.part.toJS().text}
        onChange={this.onChange}
        onInputChange={this.onInputChange}
      />
    )
  }
}

[kimmobrunfeldt]

I had to make the following changes to get our search working as expected:

<Select.Async
	placeholder="Placeholder"
	loadOptions={this.state.debouncedFetchOptions}
	value={this.state.selection.value}
+	onSelectResetsInput={false}
+	onBlurResetsInput={false}
	onChange={this._onChange}
/>

[juanpicado]

Well, after a couple of hours diving into this issue, I found the reason. We moved from 1.1.0 to 1.2.1 and then everything started to fails, primary on async calls + redux.

If you see this commit has introduced a fix to clear the input after refresh inputValue props. https://github.com/JedWatson/react-select/commit/936dd6e792d1866128819dace1b77a8b50a7eb2f and especially this commit https://github.com/JedWatson/react-select/commit/ae26bf80d10112b1407e1d34e7fa00caa1fe8699 which force by default to clear the input text after each new props are received because onSelectResetsInput is TRUE by default (https://github.com/JedWatson/react-select/blob/0d0ccd3acc4efdba0b32d711a6c16809a6d779b4/src/Select.js#L1212)

Changes are visible here as well https://github.com/JedWatson/react-select/blame/c9d027387a77b3695fdfbb3d4de25ffcea9505ee/src/Select.js#L144

My solution was force onSelectResetsInput to false, and then all works properly.

import ReactSelect from "react-select";

render() {
    return <ReactSelect {...props} onSelectResetsInput={false}/>;
}

Disclaimer: Setting of onSelectResetsInput will avoid clear the text obviously. So I’m not sure whether is intended or a bug

– Update – https://codesandbox.io/s/o4y2p39o29