Not selecting value if onChange is used

So, my react-select component is not selecting the value. Here is my initialization code.

        <Select
          name="form-field-name"
          options={ areas }
          onChange={ this.areaSelected }
        />

This is the areaSelected.

  areaSelected: function(value) {
    AreaActions.setArea(value);
  },

The action update my state beautifully, but the select component do not updated. Is it a bug?

[brianreavis]

You need to set the value={currentValue} property.

[ghost]

Hi All 😃

Sorry to ask a question on a closed issue but I have got react-select working ok eventually with redux-form until I added an onChange…now despite following the advice given above (updating State and setting the value attribute) react-select still will not allow me to Select a value from the list when the onChange has been added.

Could it be that the suggested workaround is not compatible with redux-form? If I console.log the value of the “value” attribute it seems to get lost when I call the ReduxForm.Field component, stopping the above suggested workarounds from, well, working.

Has anyone else seen this?

Thanks again!

Update

For anyone who gets led here by Google I think I sorted it. To get redux-form and react-select to play together basically ensure that Select.onBlur, onChange and value end up calling/using input.onBlur, input.onChange and input.value

  const {input, onChange, [etc]  } = props
   
  <Select
     ...
     onBlur={() => {input.onBlur(input.value)}} // so react-select keeps its value in redux-form on blur
     onChange = { (e) =>  input.onChange(onChange(e))  } // put your own code in "onChange"
     value={input.value} // needed for onChange attr to work
      />

Still testing but this seems to work with

• “redux-form”: “^6.2.0”
• “react-select”: “^1.0.0-rc.2”
• “webpack”: “^1.13.0”