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..