Using react-select with redux form

Question

I am trying to use react-select with redux-form. My code is as follows:

const DropdownComponent = ({
  input, options, name, id, placeholder,
}) => (
  <Select
    id={id}
    name={name}
    placeholder={placeholder}
    value={input.value}
    options={options}
    onChange={input.onChange}
    onBlurResetsInput={false}
    onCloseResetsInput={false}
    {...input}
    onBlur={() => input.onBlur(input.value.value)}
  />
);

The options that I am sending is as:

const options = [
  { value: '1', label: '%' },
  { value: '2', label: '$' },
];

This works fine when I select a value, but the moment the select loses focus, the value is cleared onBlur. Any suggestions as to what am I missing here?

Mrchief Mrchief · Accepted Answer · 2018-10-30T14:49:23

I suspect this maybe the culprit: onBlur={() => input.onBlur(input.value.value)}

I think that extra .value is undefined.

Using react-select with redux form

1 Answers