Angular (click) event on Enter press sending MouseEvent instead KeyboardEvent

Question

I have this html button:

<button
    type='button'
    class="button-name" 
    (click)="change($event)"
    [disabled]='disabledButton'
>

I have this in typescript:

change(event: Event) {
    console.log(event);
}

The problem is that when I hit ENTER on this button when is focused, it will trigger MouseEvent instead of Keyboard Event:

MouseEvent {type: "click", target: ..., ...}

Why does it fire MouseEvent on Enter? What's the best way to change it? The button should definitely works on both keyboard and mouse but because of some tracking and a11y running in the background, this results in incorrect behaviour.

Thanks anyone who can explain further why it is MouseEvent and suggest some solution.

Answer 1

It's the default browser behavior to trigger a click event when the enter key is pressed while a button is focused or if it's of type submit and the enter key is pressed while some element of a form is focused.

But you can easily detect if it's an actual click by the user because the event.detail of a mouse event holds the actual click count otherwise it's always zero. See UIEvent.detail.