Radiobutton doesn't focus when selecting the associated label

[juristr]

What is the expected behavior?

Clicking the radiobutton in a radio button list should select the radio button accordingly.

What is the current behavior?

Clicking the radiobutton in a radio button list does activate the clicked radio button in case when I select the label text. The ripple effect of the click however triggers properly

What are the steps to reproduce?

Can be reproduced directly on the material docs site: https://material.angular.io/components/radio/overview

Which versions of Angular, Material, OS, TypeScript, browsers are affected?

latest of both, tried in the docs site.

Is there anything else we should know?

Happy to provide a PR with some guidance where the issue could be.

[Suresh918]

Not able to reproduce. It's working as expected when I checked now at https://material.angular.io/components/radio/overview

[andrewseguin]

Seems to be working on our end as well. Not sure what caused the issue but if you can reproduce, feel free to re-open

[juristr]

@andrewseguin 🤔 hmm...I still reproduce it. You have to select the label and click on that label, not the radio button itself. Reproduced in Chrome and on MacOS.

Here's a short video where I reproduce it: https://youtu.be/oR-LRzvlfRA

Update: this apparently also happens if you select any other text on that same page, not only the radio label text 🤔

[andrewseguin]

Thanks for the video, that helps a lot. Definitely looks like a bug, albeit a bit low priority but something we ought to get fixed.

[swseverance]

I'm able to reproduce in Chrome, but not in Safari on MacOS. The issue appears to be that although a click event does get dispatched to the label element, a generated click event does not appear to be dispatched to the input element. I'm unable to explain why that is.

However, the following changes seem to resolve the issue:

radio.html

<label [attr.for]="inputId" class="mat-radio-label" #label (click)="_onLabelClick()">

radio.ts

_onLabelClick() {
  this._inputElement.nativeElement.click();
}

I can submit a PR with these changes but as of now I'm unable to provide an accompanying unit test that replicates the behavior we're seeing.

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