How to use react-select with redux-form?

Question

I am trying to integrate react-select using redux form...

Here is my code

import Select from 'react-select'
import StyledSelectField, { StyledMessages } from './style'

const SelectField = props => {
  const { input, label, placeholder, options, meta, ...StyledProps } = props
  const { onChange, onBlur, onFocus } = props.input
  return (
    <StyledSelectField {...StyledProps} meta={meta} hasValue={!!input.value}>
      <label htmlFor={input.name}>{label}</label>
      {placeholder && <div className="placeholder">{placeholder}</div>}
      <Select
        name={input.name}
        value={input.value.value}
        onChange={onChange}
        onBlur={onBlur}
        onFocus={onFocus}
        options={options}
        {...props}
      />
      <StyledMessages>
        {meta.touched &&
          ((meta.error && <span className="error">{meta.error}</span>) ||
            (meta.warning && <span className="warning">{meta.warning}</span>))}
      </StyledMessages>
    </StyledSelectField>
  )
}

class TestingCycleForm extends PureComponent {
  render() {
    const { preMonitoring, handleChange, handleSubmit } = this.props
    return (<div>
      <Field
        label="18%"
        name="patientPercentage"
        className="form-control"
        component={SelectField}
        options={Config.get('/PATIENT_PERCENTAGE')}
      />
    </div>)
  }
}

All things are working but my input field gets cleared on focus out what I am doing wrong here?

Thanks in advance... Any help would be appreciated

Answer 1

You say “focus out” - does that mean it clears on blur? If so, does setting onBlurResetsInput and onCloseResetsInput to false help?

Update: here's the link to the props table from the github readme . You've got to set both onBlurResetsInput and onCloseResetsInput to false at the same time, onBlurResetsInput set to false, by itself, will do nothing.

And also you need to remove the onBlur prop from the select which causes field clear on Blur

  <Select
    name={input.name}
    value={input.value.value}
    onChange={onChange}
    onBlurResetsInput={false}
    onCloseResetsInput={false}
    onFocus={onFocus}
    options={options}
    {...props}
  />