React: Click events are triggered with 'enter' keyPress events inside forms

Created on 20 May 2015 · 11Comments · Source: facebook/react

Triggering a keypress enter event inside a form input type=text that has also has a button with a click listener without a defined type will result in a SyntheticMouseEvent click on that button and hit the clickHandler. Adding a type will prevent this behavior.

Source

Swaagie

👍17 🎉4

Most helpful comment

buttons are type="submit" by default in HTML, and pressing enter simulates a click on the button. This is standard HTML behavior, not specific to React.

sophiebits on 31 May 2015

👍43 🎉10 😄8

All 11 comments

Isn't that default html behavior ? If you have an input and a button in the form, pressing enter will also click the button.

Sinewyk on 29 May 2015

👍7

How is this even close to default behaviour? An enter keypress triggers a total random click event on the form... in fact an enter should trigger a submit on the form, not a simulate a click on button. But this issue is not about the button. It's about how a keypress event is magically converted to a click event on the form element.

Swaagie on 31 May 2015

👍4

buttons are type="submit" by default in HTML, and pressing enter simulates a click on the button. This is standard HTML behavior, not specific to React.

sophiebits on 31 May 2015

👍43 🎉10 😄8

Apologies, rechecked the original code and this might have been caused by browser defaults. First button is missing the type directive, both FF and chrome probably assign a type submit by default which could explain this.

<!DOCTYPE html>
<html>
  <head>
    <title>Issue</title>
    <script src="https://fb.me/react-0.13.3.js"></script>
    <script src="https://fb.me/JSXTransformer-0.13.3.js"></script>
  </head>
  <body>
    <div id="example"></div>
    <script type="text/jsx">
      var Form = React.createClass({
        div: function div() {
          alert('what tha');
        },

        submit: function submit() {
          alert('regular submit');
        },

        render: function render() {
          return (
            <form role="form">
              <button onClick={this.div}>the stubbed dropdown element</button>

              <input type="text" placeholder="regular" />
              <button type="submit" onClick={this.submit}>save me</button>
            </form>
          );
        }
      });

      React.render(
        <Form />,
        document.getElementById('example')
      );
    </script>
  </body>
</html>

Only question that remains is, is it valid to only trigger the click on the first occurring button element and not both?

Swaagie on 1 Jun 2015

👍3

Also - is there some way (on the event) to differentiate between a button click and an form enter keypress?

Ideally I want to be able to hit enter and submit & remain, or click the button and do submit & next

zeroasterisk on 19 Aug 2016

👍6

@zeroasterisk Read event.target.detail, it holds the number of clicks. If it's set to 0, then the event was synthetized (ref: https://developer.mozilla.org/en-US/docs/Web/API/UIEvent/detail)

ngryman on 11 Jul 2017

👍3 👎1

It's actually on the event. Not the target. The following follows the correct pattern to descern the difference between a click event and a return event on a button.

// src/components/Button/Button.js

import React from 'react';

const handleClick = (event) => {
  if (event.detail === 0) {
    // a return event occured
  }

  // some type of click event occured
};

const Button = (props) => (
  <button onClick={handleClick}>{props.label + ''}</button>
);

export default Button;

SavePointSam on 8 Feb 2018

👍12

An enter keypress triggers a total random click event on the form... in fact an enter should trigger a submit on the form, not a simulate a click on button.

Exactly. I guess since type="Submit" is the default, we have to ensure that type="button" which should be the default in my opinion!

sjeatdsi on 4 Oct 2018

👍1

When an input element is in focus, it can be activated as a press Enter or a shortcut with accesskey or clicking. Buttons can be operated by mouse, touch, and keyboard users. The button's click event fires for mouse clicks and when the user presses Enter or Space while the button has focus. Unfortunately, the official documentation does not mention the reasons why pressing Enter button causes a click event. But you can be sure of trying it yourself on my codepen.(https://codepen.io/Halochkin/pen/ebvaQr?editors=1111)

Halochkin on 22 Dec 2018

👍4

onKeyPress={(e) => { e.key === "Enter" ? handleOk() : '' }}

fadhlaouir on 27 Jun 2019

🎉2

This makes no sense at all to be honest.

I have a form.

<form onSubmit={handleSubmit}>
   <div>
      <input name="1" id="1" />
      <input name="2" id="2" />
   </div>
   <button onClick={changeRoute}>Back</button>
   <button>Submit</button>
</form>

When I press enter with focus set to input 1 or 2, changeRoute is called for some reason...

<form onSubmit={handleSubmit}>
   <div>
      <input name="1" id="1" />
      <input name="2" id="2" />
   </div>
   <button type="button" onClick={changeRoute}>Back</button> // <-- ADD TYPE="BUTTON"
   <button>Submit</button>
</form>

Why is handleSubmit called as I would expect first after adding type="button" to the back button?