bug(menu): Disabled mat-menu-item on anchor tag still clickable
- Dominant language
- TypeScript
- Stars
- 25k
- Forks
- 6.8k
- Avg merge
- 1d 8h
- Merged PRs (30d)
- 91
Description
### 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` Anchor` looks disabled but is still clickable.
However a regular href ` Google` 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
### Actual Behavior
### Environment
- Angular: 16
- CDK/Material: 16
- Browser(s): Chrome
- Operating System (e.g. Windows, macOS, Ubuntu): Windows 11
Contributor guide
Research direction
Reproduce the issue using the linked StackBlitz example, first checking the mat-menu-item and CDK menu item anchor cases described in the steps. Done means disabled anchors no longer invoke the click handler or navigate through routerLink, while the regular href case continues to behave as expected.
Written by the indexing model from the issue text.
Assessment
- Tech stack
- angular, typescript
- Domain
- frontend
- Issue type
- Bug
- Difficulty
- 3/5
- Estimated time
- 1-2 days
- Activity status
- Stale
- Clarity
- Mostly clear
- Newbie friendliness
- 38/100