React-redux-form: Way to disable form submit on Enter-key press

[kallemakynen]

The Problem

The form gets submitted when the form is valid and user hits enter-key in a Control. Sometimes you don't want this to be possible.

Steps to Reproduce

Have a Form
Have a Control field for an user input
Have non-form related task that you want the user to do before submitting the form.
Submit button is disabled until this task is fulfilled
User hits enter-key in the Control field

Expected Behavior

If I don't want the form to be submitted, enter-key triggers an event that is defined in a prop.
For example or

Actual Behavior

Non-form task has been avoided and form has been submitted

[davidkpiano]

With normal forms and inputs, this is the default behavior - RRF is not the cause of this behavior (that pressing Enter will submit a form). To solve this in vanilla React, you would have something like this:

<input type="text" onKeyPress={e => {
  if (e.key === 'Enter') e.preventDefault();
}} />

With a small change that I need to make, you would do the same in RRF:

<Control.text model="user.name" onKeyPress={e => {
  if (e.key === 'Enter') e.preventDefault();
}} />

Would that suffice? You can always make a higher-order component that automatically adds this.

[kallemakynen]

Sounds good to me

[zcfan]

Have the same problem, and this is the perfect solution to me: https://github.com/erikras/redux-form/issues/572#issuecomment-268905929

[mukuljainx]

One more possible solution:

Let's say you have multiple input and you want to disable submit on Enter for each, one way attach onKeyPress to each as @davidkpiano suggested or just remove type="submit" from submit button or provide type type="buttom" to it, it will not trigger onSubmit. Now we have to use handleSubmit from formik props and can just allow submit whenever we want