Click events are triggered with 'enter' keyPress events inside forms #3907

Swaagie · 2015-05-19T23:01:37Z

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.

The text was updated successfully, but these errors were encountered:

Sinewyk · 2015-05-29T14:56:04Z

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

Swaagie · 2015-05-31T20:49:46Z

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.

sophiebits · 2015-05-31T21:23:02Z

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.

Swaagie · 2015-05-31T22:23:57Z

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?

zeroasterisk · 2016-08-19T14:12:52Z

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

ngryman · 2017-07-11T11:33:36Z

@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)

SavePointSam · 2018-02-07T23:33:21Z

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;

sjeatdsi · 2018-10-04T19:26:12Z

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!

Halochkin · 2018-12-22T15:01:04Z

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)

fadhlaouir · 2019-06-27T14:00:04Z

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

hegelstad · 2020-10-17T15:01:56Z

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?

loucadufault · 2024-05-06T14:25:41Z

I also noticed in my case that setting type='button' on the first button caused the keyPress event to trigger the click event on the second button in the form. This may be expected, but worth noting.

Swaagie changed the title ~~Click events triggered with enter key presses inside forms~~ Click events are triggered with 'enter' keyPress events inside forms May 20, 2015

sophiebits closed this as completed May 31, 2015

Provide feedback

Saved searches

Use saved searches to filter your results more quickly

Click events are triggered with 'enter' keyPress events inside forms #3907

Click events are triggered with 'enter' keyPress events inside forms #3907

Swaagie commented May 19, 2015

Sinewyk commented May 29, 2015

Swaagie commented May 31, 2015

sophiebits commented May 31, 2015

Swaagie commented May 31, 2015

zeroasterisk commented Aug 19, 2016

ngryman commented Jul 11, 2017

SavePointSam commented Feb 7, 2018

sjeatdsi commented Oct 4, 2018 •

edited

Halochkin commented Dec 22, 2018

fadhlaouir commented Jun 27, 2019

hegelstad commented Oct 17, 2020 •

edited

loucadufault commented May 6, 2024

Click events are triggered with 'enter' keyPress events inside forms #3907

Click events are triggered with 'enter' keyPress events inside forms #3907

Comments

Swaagie commented May 19, 2015

Sinewyk commented May 29, 2015

Swaagie commented May 31, 2015

sophiebits commented May 31, 2015

Swaagie commented May 31, 2015

zeroasterisk commented Aug 19, 2016

ngryman commented Jul 11, 2017

SavePointSam commented Feb 7, 2018

sjeatdsi commented Oct 4, 2018 • edited

Halochkin commented Dec 22, 2018

fadhlaouir commented Jun 27, 2019

hegelstad commented Oct 17, 2020 • edited

loucadufault commented May 6, 2024

sjeatdsi commented Oct 4, 2018 •

edited

hegelstad commented Oct 17, 2020 •

edited