Remote submit breaks when submit function passed to handleSubmit

I’ve been messing around with remote submit lately and it works beautifully whenever I pass my submit function to reduxForm() as a config value. However, if I instead supply it to my handleSubmit() function on the form, my app breaks with the following error:

You must either pass handleSubmit() an onSubmit function or pass onSubmit as a prop

Note that I am using redux-form/immutable and that I’m using stuff like bindActionCreators so maybe there is some weird combination there or maybe my implementation is simply wrong, but this seems like a bug to me.

I’m using: redux-form v6.2.1 redux v3.6.0 react v15.3.1

Here’s a simplified version of my code:

Wrapper.js

import { bindActionCreators } from 'redux';
import { connect } from 'react-redux';
import { submit } from 'redux-form/immutable';

const mapDispatchToProps = function (dispatch) {
  return bindActionCreators({
    submit: submit
  }, dispatch);
};

class Wrapper extends Component {
  render() {
    return (
      <MyForm />
      <SubmitButton submit={submit} />
    );
}

export default connect(mapStateToProps, mapDispatchToProps)(Wrapper);

MyForm.js

import validate from './validate';

class MyForm extends Component {
  mySubmitFunction = (values) => {
    console.log('submitted!');
  }

  render() {
    const { handleSubmit } = this.props;

    return (
      <form onSubmit ={handleSubmit(this.mySubmitFunction)}>
        <Field ...fieldProps />
      </form>
    );
  }
}

export default reduxForm({ form: 'myForm', validate })(MyForm);

SubmitButton.js

export default class SubmitButton extends Component {
  submit = () => {
    this.props.submit('myForm');
  }

  render() {
    return <button onClick={this.submit}>Submit</button>
  }
}

Shouldn’t this code work? I’m making my submit function local to the MyForm class here, but it still breaks if it is an external function. Once again, this works perfectly if I pass an external submit function to reduxForm() instead. Is this a bug?

[davidkpiano]

4th option: a <Form> component that’s just a shallow wrapper for <form>, which will already know what is passed to its onSubmit so you can use your redux-dead-drop strategy to listen for dispatched submit actions and call submit?

E.g. <Form onSubmit={handleSubmit(...)}>

[mdrideout]

I struggled with this for a few hours. And it was as simple as including “Form” in the redux-form import statement

import { Form, Field, reduxForm, SubmissionError } from 'redux-form';

And changing to an uppercase “Form” for my form tag.

<Form name={formName} id={formName} onSubmit={handleSubmit(() => this.submitForm())}>

And I can now remotely submit the form from an action

// Submit the form
dispatch(submit(formName));

I agree that the documentation should be updated to include an example like this.