Feature request: ability to submit the form when pressing Enter while focused on any input within the form

[morgoe]

Traditional HTML forms can be submitted at any time while filling out the form by simply pressing Enter. This is easy to do even in React by adding an onSubmit function to the form component and changing the primary button type to "submit". https://stackoverflow.com/questions/33211672/how-to-submit-a-form-using-enter-key-in-react-js

However since reacto-form uses a div instead of a form, we can't do this.

This is expected behaviour in a form, and is confusing to users when not adhered to. Can we add this in somehow?

[morgoe]

@aldeed I've made changes to Reaction's login form here https://github.com/sportsdirect/reaction-storefront/pull/627 but I'm unable to affect the rest of checkout due to this.

It would be ideal to set this function just once instead of having to pass this as an onSubmit function to every single input in the form. However there might be cases, like when using Reaction's custom select dropdown, where pressing enter should select the highlighted option and not submit the form.

[aldeed]

If any input component takes a prop called onSubmit, reacto-form will submit the form when that is called on any input. Unfortunately this only works if the input component does accept and call this prop. If you don't have control over an input component, you may have to submit a PR or write a wrapper around it. If an input has a similar prop like onEnterKeyPressed, you can wire up your own submission by calling form.submit() within that handler.

The problem here is that <form> has other behavior that I'm trying to avoid. Keeping just the good parts is the goal. Also, reacto-form is intended to eventually work with React Native, which does not have <form>.

There may be some other more generic solution. If anyone can think of one, please post.