I have this amazingly complicated form. When I hit enter when in the input field, it always triggers the first button, not the submit (unless submit is first) why?

form.jsx

<form onSubmit={ evnt => {
  evnt.preventDefault();
  console.log({ pendingUser });
  handleSave(person.merge(getValues(pendingUser)));
}} >
  <div className="form-group">
    <label htmlFor="firstname">First Name</label>
    <input id="firstname" className="form-control" ref={ bindInput.bind(this, pendingUser, 'firstname') } defaultValue={ firstname } type="text" />
  </div>
  <div className="form-group">
    <label htmlFor="lastname">Last Name</label>
    <input id="lastname" className="form-control" ref={ bindInput.bind(this, pendingUser, 'lastname')} defaultValue={ lastname } type="text" />
  </div>
  <div>
    <button onClick={ evnt => {
      evnt.preventDefault();
      console.log('cancel clicked');
      handleCancel();
    }}>Cancel</button>
    <input type="submit" value="Save" />
    { handleDelete && <button onClick={ evnt => {
      evnt.preventDefault();
      handleDelete(person.get('id'));
    }}>Delete</button> }
  </div>
</form>