Disabled radio-button still receives click events

[bagage]

Reproduction

Use StackBlitz to reproduce your issue: https://stackblitz.com/angular/xxjmayybegr

Steps to reproduce:

1. Click Disabled button: nothing happens
2. Click Summer disabled radio button: an alert is emitted.

Expected Behavior

What behavior were you expecting to see?

Since the radio button is disabled, the (click) output should not be emitted.

Actual Behavior

What behavior did you actually see?

The alert is emitted.

Environment

• Angular: 8.2.9
• CDK/Material: 8.2.2
• Browser(s): Chromium Version 77.0.3865.90 (Official Build) Built on Ubuntu , running on Ubuntu 18.04 (64-bit)
• Operating System (e.g. Windows, macOS, Ubuntu): Debian

[sollenne]

Doesn't look like the stackblitz has any disabled options

[bagage]

Damn I failed my stackblitz. Here is the updated URL: https://stackblitz.com/edit/angular-aceywx

[PerezArmando]

I think that the issue may be that you directly have the (click) event on the component on your side of your app. Even though the component is disabled, the (click) event will always be emitted, and the material library will not be able to prevent that.

So, the issue in my opinion is not related to the library itself. If you switch to use the (change) event instead of the (click) event, you'll notice that the radio button does not emit when disabled. Any thoughts?

[crisbeto]

The disabled attribute only prevents events on native elements, whereas mat-radio-button is a custom one. You should be able to use the custom change event which won't fire on disabled radio buttons.

[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.}