bug(MatButtonModule): Disabled mat-button with routerLink still works

[scopchanov]

Reproduction

The issue is reproduced on StackBlitz: https://stackblitz.com/edit/inactive-links-problem

Steps to reproduce:

1. Use the following code:
   <a mat-button routerLink="/foo" [disabled]="true">Foo</a>

Expected Behavior

The button is visually disabled and clicking it does not activate the link.

Actual Behavior

The button is indeed visually disabled, but the link still works.

Environment

• Angular: 9.1.9
• CDK/Material: 9.2.4
• Browser(s): Chrome, Mozilla, Safari
• Operating System (e.g. Windows, macOS, Ubuntu): Windows, iOS

[devversion]

I was able to reproduce this. Usually anchor elements cannot be disabled (natively), but our MatAnchor implementation tries to support a disabled binding by intercepting the click event and preventing default / stopping propagation. This does not work nicely as the Angular routerLink directive registered its click event before MatAnchor.

One could argue this is working as expected, but then we shouldn't support the disabled input for anchors. Alternative option is that we set pointer-events: none, but that would then break tooltips.

Related post: https://css-tricks.com/how-to-disable-links/

[scopchanov]

I hope the following info could help fixing the issue:

1. It does work with the original example from Angular Material + added [disabled]="true", i.e.

<a mat-button href="https://www.google.com/" target="_blank" [disabled]="true">Link</a>

However, in this case the attribute is href instead of routerLink.

2. It also works as expected with MatListItem, i.e.

<mat-nav-list>
    <a mat-list-item routerLink="/foo" [disabled]="true">Foo</a>
    <a mat-list-item routerLink="/moo" [disabled]="true">Moo</a>
</mat-nav-list>

3. Only the combination of mat-button and routerLink does not work well with disabled.

Could MatListItem be used as an example to fix MatButton?

[MaxDZ8]

Just to ensure this gets some minor activity and does not get closed I confirm I have stumbled on this today.

Since routerLink is "base angular" directive while disabled comes from mat-button, I suspect the thing could get involved.

For the time being, I will be filtering the (click) event myself but I hope this gets some attention.

[Ishou]

I also reproduce this issue. It seems like this is a side effect of c2abcad, it is supposed to avoid "actually" disabling the button so it may have a tooltip, but I guess it also lets it keep the href.
I don't see any actual change in the commit that could break things but the intent seems to match the issue...

Here is a workaround with a global style that works for my case (it disables any tooltip too):

.mat-button-disabled {
  pointer-events: none;
}

[ronaldhoek]

This has been reported before: #12920

[filarrro]

+1 on this one, if the attribute is supported then it should be working as expected

[zarend]

Cannot reproduce. I believe this has been fixed.

[angular-automatic-lock-bot]

This issue has been automatically locked due to inactivity.
Please file a new issue if you are encountering a similar or related problem.

Read more about our automatic conversation locking policy.

_{This action has been performed automatically by a bot.}