Search code examples
javascriptreactjsreduxredux-formreact-select

redux-form and react-select onChange doesn't update redux value


So I'm having issues using redux-form with react-select, this is what I have so far:

<Field
   name="objective"
   type="text"
   component={prop => <FormSelect {...prop} options={options} />}
   label="Objective"
/>

And then:

const FormSelect = ({ options, label, input: { value, onChange, onBlur } }) =>
  <ControlGroup title={label} styleId={label}>
    <Select
      options={options}
      simpleValue
      onChange={onChange}
      value={value}
      onBlur={() => onBlur(value)}
      id={label}
    />
  </ControlGroup>;

But then the select value does not change..

I get a redux-form/CHANGE with a action.payload of awareness (which is the value I want to select), but right after there is another redux-form action redux-form/BLUR with an action.payload of "".

I've read a bunch of github issues about this, tried a lot of them but nothing seems to be working..

example:

https://github.com/JedWatson/react-select/issues/1129

https://github.com/erikras/redux-form/issues/82

I also tried: onBlur={() => onBlur('awareness')} and it did not change the value on the select, even both payloads were had the same value..


Solution

  • I forgot to add redux-form reducer to my reducers.. Thanks anyway