Why does the wrong button take the Enter key?-CodePudding

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 >
    <button 
            (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 
         *ngIf="index > 0">
      <button 
              (click)="removeRow(index)">Remove</button>
    </div>

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

  <div >
    <button 
            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?

CodePudding user response：

I think onKeyDownEvent is what you are actually searching for.

I would create a handler function which you would use as the handler function when the event is fired.

In the handler i would react according to the sender (the button from which the event is fired).

You could maybe also use the tabindex to make the second button click first when the uswr hits enter. But i am not sure if the tabindex is the right thing for that.

Also by calling the Event.stopPropagation() function in your handler function you can stop other elements reacting to the event.

CodePudding user response：

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.