react-select does not clear value when redux-form is reset

Question

I have a stateless React function to render a react-select Select to a form. Everything else works nicely with redux-form except when redux-form is reset. I need to reset the form manually after successful post.

onChange and onBlur change the redux-form value correctly when Select has a value change. When I reset the redux-form, the redux-form value is cleared but the Select will have the old value.

function SelectInput(props) {
  const { input, options, label } = props;    
  const { onChange, onBlur } = input;

  const handleChange = ({ value }) => {
    onChange(value);
  };
  const handleBlur = ({ value }) => {
    onBlur(value);
  };    
  return (
    <FormField {...props}>
      <Select placeholder={label} options={options} onChange={handleChange} onBlur={handleBlur} />
    </FormField>
  );
}

I converted the SelectInput to React.PureComponent, and added the value as a state inside the component and looked for when the Component received new props:

 constructor(props) {
   super(props);
   this.state = {value: ''}
  }
 componentWillReceiveProps(nextProps){ 
   this.setState({value: nextprops.input.value}) 
 }

 <Select value={this.state.value} placeholder={label} options={options} onChange={handleChange} onBlur={handleBlur} />

With this Select was not able to show the value at all.

The problem is that how I can update the Select to show empty value when redux-form that this field is part of is reset? Redux-form resets the value corretly inside the redux state and if I try to submit the form, validation notices that that Select has empty value. The Select will however display the old value so that user thinks that there is a value selected.

Reset is done by dispatching reset in the actual redux-form component. Redux devtools show that fields are reset and the redux state is cleared from all the value, Select component just won't update the DISPLAYED value to empty.

const afterSubmit = (result, dispatch) =>
  dispatch(reset('datainputform'));

export default reduxForm({
  form: 'datainputform',
  onSubmitSuccess: afterSubmit,
})(DataInputForm);

Versions I use:

• [email protected]
• [email protected]

Answer 1

Got it working. Problem was handling the Select null value. Changed stateless function to PureComponent, added the value to state.

constructor(props) {
    super(props);
    this.state = { value: '' };
  }

Redux-form changes the react-select value by sending new props. So added

componentWillReceiveProps(nextProps) {
    if (nextProps.input.value === '') {
      this.setState({ value: '' });
    }
  }

Added setState to handleChange:

  handleChange = (data) => {
    const value = data === null ? '' : data;
    this.setState({ value });
    this.props.input.onChange(data.value);
  };

And then added the value prop.

<Select value={this.state.value}...

Answer 2

You can also set a key at the form level itself. The key will take a unique value that you can store in the component state. This unique value will be updated every time reset is hit.

state = {
  unique_key: ''
}

// this is the onClick handler for reset button on the form
onResetForm = () => {
  reset_val = Date.now();
  this.props.reset();
  this.setState({unique_key: reset_val});
}

<Form actions={action_func}, key={this.state.unique_key}/>

Now whenever reset is clicked, the handler will update the unique_key. This will result in re-rendering the Form with the default values. The handler also calls the form reset function to clear the redux.