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

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.

[sophiebits]

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.

[SavePointSam]

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;