Form submission canceled because the form is not connected

The WARNING: “Form submission canceled because the form is not connected” appears on the console when the user clicks in a cancel button that has the following code:

  handleCancel = (evt) => {
    this.props.reset();
    this.props.router.replace('/');
  }

What is the right way to CANCEL the form submission and navigating away from the page that has a redux-form?

I am using:

• redux-form: ^6.5.0
• react-router: ^3.0.2
• semantic-ui-react: ^0.66.0
• apollo-client: ^0.8.7

When the user clicks in the submit button, everything works fine (data is mutate using Apollo Client and navigating away from the page that has the form): no warning is shown

[erikras]

That’s pretty strange. My guess is that you have:

<button onClick={this.handleCancel}>Cancel</button>

and it should be

<button type="button" onClick={this.handleCancel}>Cancel</button>
        ^^^^^^^^^^^^^

I think that most browsers default a <button/> to be a submit button, so you are both trying to submit the form and navigate away.

Another option is to call evt.preventDefault() in your handleCancel() function.

[McChubby]

Adding type=“button” worked great, thanks!