[SOLVED] Why does the wrong button take the Enter key?

Why does the wrong button take the Enter key?

I have an Angular 13 form, and in it are a few buttons. This one is to add a new row to the form:

<div class="col-md-2 offset-md-8">
    <button class="badge rounded-pill bg-secondary mt-2"
            (click)="addRow()">Add compound ingredient</button>
  </div>

For some reason, this button takes the default Enter key event.

If you add a row using the above button, the new row has this button next to it, to remove that row. If it is visible, it actually takes the Enter key event.

    <div class="col-md-1"
         *ngIf="index > 0">
      <button class="badge rounded-pill bg-secondary mt-2"
              (click)="removeRow(index)">Remove</button>
    </div>

This is the button that I WANT to have the Enter key event.

  <div class="col-md-2 d-grid">
    <button class="btn btn-lg btn-danger"
            accesskey="s"
            tooltip="Alt-S"
            (click)="getData()">Send</button>
  </div>

I have tried adding the type="submit" property, and that doesn't do it. In the meantime I've added the accesskey, but that's not what I want in the long run for the form. What am I doing wrong?

Solution

I ended up having to add the type="button" to the buttons that I don't want catching the event, add type="submit" to the desired button, and then had to make sure that the desired button was within the <form></form> tags, which it was not.