bug(menu): Disabled mat-menu-item on anchor tag still clickable

[shammy8]

Is this a regression?

• [ ] Yes, this behavior used to work in the previous version

The previous version in which this bug was not present was

No response

Description

A disabled mat-menu-item anchor ie<a disabled mat-menu-item (click)="stillGetsCalled()" routerLink="/stillNavigates"> Anchor</a> looks disabled but is still clickable.

However a regular href <a disabled mat-menu-item href="https://www.google.com"> Google</a> works as expected

This occurs with the cdk menu item too.

Reproduction

StackBlitz link: https://stackblitz.com/edit/32sike?file=src%2Fexample%2Fmenu-icons-example.html Steps to reproduce:

1. Click the 3 dot menu, click Disabled Anchor Click, 'anchor click' is logged to the console
2. Click the 3 dot menu, click Disabled Anchor RouterLink, NewComponent is rendered in the router-outlet

Expected Behavior

<a disabled mat-menu-item (click)="stillGetsCalled()" routerLink="/stillNavigates"> should not be clickable

Actual Behavior

<a disabled mat-menu-item (click)="stillGetsCalled()" routerLink="/stillNavigates"> is clickable

Environment

• Angular: 16
• CDK/Material: 16
• Browser(s): Chrome
• Operating System (e.g. Windows, macOS, Ubuntu): Windows 11

[dcchristopher]

Also encountered this issue when upgrading from 15 to 17. Whether it's a [routerLink] attribute or (click) event, just make sure to use a ternary: shouldBeDisabled ? undefined : normalActionOrValue. That will stop any click event in its tracks.