React: Forms mishandle submit for Enter key

[tmcwilliam]

React seems to be executing the first event handler attached to elements in a form rather than executing the onSubmit handler when hitting the Enter key.

jsFiddle: http://jsfiddle.net/tmcwilliam/mufcw3wv/

[sophiebits]

Little-known fact: the <button> tag defaults to type="submit". If you change it to type="button", your fiddle works as intended.

[kyeotic]

@spicyj That seems completely backwards. Is there a way to change that behavior?

[browniefed]

@tyrsius you could create a default React button component that has type="button" always on it.

[kyeotic]

Is there a way to actually override <button>, or are you talking about making <other-button>? Because the latter isn't really changing the backwards behavior of <button>

[browniefed]

I'm recommending the <other-button> approach. React is focused on matching browser behavior, not modifying it regardless of how backwards it is.

[hugotox]

I'm curious why this issue was closed? Seems a legit issue

[sophiebits]

This is part of how HTML works, not specific to React at all.

[naoisegolden]

@hugotox:

If a button is not set to type="button" it will default to be of type="submit", making it so that you have more than one submit button. Pressing enter will run the first one defined.