bug(COMPONENT): Inconsistency in behavior of a[mat-button] and a[mat-menu-item] when disabled

[reuse-ay]

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

This may be a feature request.

When a[mat-button] is disabled, if you right-click it, the menu will be the normal one, but if you right-click a[mat-menu-item], the options for clicking a link will be displayed, and you can actually navigate to the page.

Reproduction

https://github.com/reuse-ay/angular-mat-a.git

Expected Behavior

When a[mat-menu-item] is disabled, I don’t want the option for the link to be displayed.

Actual Behavior

option for the link to be displayed.

Environment

• Angular:19
• CDK/Material:19
• Browser(s):chrome
• Operating System (e.g. Windows, macOS, Ubuntu):windows

[amysorto]

Can you add your reproduction to a Stackblitz?

[reuse-ay]

https://stackblitz.com/~/github.com/reuse-ay/angular-mat-a?file=src/app/app.component.html

[shhdharmen]

Setting the pointer-events: none seems to fix the issue:

.mat-mdc-menu-item[disabled] {
    pointer-events: none;
}

[amysorto]

@reuse-ay Thanks for the StackBlitz, thats really helpful.

Hmm it does seem like tabindex is being set to -1 for both, and both disabled and aria-disabled is being set to true correctly.

I do see the context menu on Chrome and Safari that has the options to navigate to link despite it being disabled, and its only happening in the mat-menu-item elements like you mentioned.

@shhdharmen I tried adding that code but still see option to navigate to the link.

[shhdharmen]

@amysorto I think it's CSS specificity. If you add !important, you will notice it's fixed.

Demo: https://stackblitz.com/edit/github-w9fhqnyb?file=src%2Fstyles.scss

I think it can be added around this line:

components/src/material/menu/menu.scss

Line 180 in af29a92

opacity: 0.38;

, we would not need !important there I think.