Form - Enter key to submit form - JavaScript react-final-form

I'm seeing that it does submit upon hitting "enter." Where are you seing the problem?

1

Answered Oct 11 '19 at 14:54

tstirrat15

@tstirrat15 I have the same. Is it not a bug? As I understand it is en expected behaviour. Can we disable that?

1

Answered Feb 27 '20 at 20:02

il421

@il421 I'm a bit confused. What behavior do you want and what behavior do you see?

I was saying that in the bug report submitted above, they were complaining that the form wasn't submitted when they pressed Enter, but when I went to their sandbox, entered things into the form, and pressed Enter, the form submitted (as I would expect from the way that form is constructed).

1

Answered Feb 27 '20 at 21:22

tstirrat15

You can wrap your form with

<form onSubmit={handleSubmit}>
....
</form>

it will then perform the native browser behavior for forms, which is Submit on Enter key.

1

Answered May 04 '20 at 19:37

idangozlan

You can wrap your form with

<form onSubmit={handleSubmit}>
....
</form>

it will then perform the native browser behavior for forms, which is Submit on Enter key.

My form wasn't submitting on Enter with this alone. I also had to add a <button> with type="submit" to the form then it started working.

edit: For anyone else that has their submit button outside their form you can still make Enter work by adding a submit button to the form and setting its style to display: none

1

Answered Sep 06 '20 at 12:10

joshraker

edit: For anyone else that has their submit button outside their form you can still make Enter work by adding a submit button to the form and setting its style to display: none

A better approach for modern browsers is to use the attribute "form" on the submit button:

https://stackoverflow.com/questions/7020659/submit-form-using-a-button-outside-the-form-tag/12567605#12567605

1

Answered Jan 21 '21 at 06:57

alfondotnet

Just add html form inside Form:

<Form>
{ 
({handleSubmit}) => 
<form onSubmit={handleSubmit}>
//some fields... 
<button type='submit'>Submit form</button>
</form>
}
</Form>

1

Answered Apr 23 '21 at 10:21

RewriteH