onSubmit cancels when button onClick causes re-render
Hello there! We're planning to use redux-form in our CMS UI (silverstripe.org), which gets powered by a JSON form schema. This means we've got a "builder" class which dynamically creates a form from the schema definitions (and passes it through reduxForm() on render()).
I'm stuck on a bug on how to handle a "loading indicator" on the clicked button in this particular configuration. I'm rendering actions in the same component which performs reduxForm(), and pass them through the reduxForm() layer down to the actual form rendering. A button onClick() causes a setState() in this component, which changes actions and triggers a re-render.
I would expect my onSubmit handler to be fired after the onClick completes (and doesn't explicitly cancel the event), but instead it re-renders the form and defaults to the standard <form> submission behaviour, causing a page reload.
An isolated example: https://gist.github.com/chillu/b102b4ebea3655db0703f95db9d24511
If you add these classes to any of the examples/ in this repo you should get it to build. Comment out the setState() invocation to verify it works without it. I've removed a bit of noise like hot reloading.
We can't easily move the action generation one level down (inside the component which is wrapped in reduxForm()) - so the re-render seems like a necessary one. But it shouldn't fluke out of the onSubmit handling either way, right? While I could move the submitting state into the button component itself, I need to unset it based on factors outside of its control - and the only way to get those through is via React props on the containing form which causes a re-render.
Source: redux-form/redux-form