React-select: Not selecting value if onChange is used

[edwinlunando]

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.

[edwinlunando]

How to get the currentValue? I added your code and it did not work.

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

[brianreavis]

From the onChange event. In most cases, you'll want to call set setState with the value coming from onChange and then use this.state.theValue for the value property.

[edwinlunando]

I have followed your advice to change the value on onChange, now, it is updating the value, not the label. So, on the current selected shows the id, not the label.

areaSelected: function(e) {
    AreaActions.setArea(e);
    this.setState({ selectValue: e });
  },

and

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

Any idea?

[tokenvolt]

Faced the same issue, it updates the value, but how do I render the label of the selected value?

[huuuda-aus]

So if I have 10 selects in a single page, will I have to have 10 handlers for that? (those selects can NOT be an array)

[jvchappell]

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"