bug(mat-radio-button): Click target is well outside of the visible label

[philmayfield]

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

The label element for the mat-radio-button component has the style width: 100% applied to it. When using the component in a stacked vertical orientation such as on the examples page of matarial.io, it creates a much larger hit area for each radio button than intended.

This leads to potentially accidental form changes by clicking in what appears to be white space.

When comparing to the mat-checkbox component the clickable target is only as large as the visible label. These input types should have very similar interaction.

I found the related issue #14894 where I believe the 100% width was introduced, but I believe there was a disconnect between the "selected"-ness of an item and its focused state. This appears to no longer be the case as simply removing the width: 100% prop seems to behave as intended.

Reproduction

Visit the material.io example for radio buttons: https://material.angular.io/components/radio/examples

In the second example (Pick your favorite season) where the radios are oriented vertically - observe how you can control the selected option from the right hand side of the container.

Visit the material.io example for checkboxes: https://material.angular.io/components/checkbox/examples

In the last example (Select your toppings) where the checkboxes are oriented vertically - observe how the hit area for a given option is only as large as its visible label.

Expected Behavior

A radio button click area should be no wider than its visible label.

Actual Behavior

The click area for a radio button is the full width of its containing element.

Environment

Angular CLI: 12.2.14
Node: 14.16.0
Package Manager: yarn 1.22.10
OS: darwin x64

Angular: 12.2.15
... animations, common, compiler, compiler-cli, core, forms
... language-service, localize, platform-browser
... platform-browser-dynamic, router

Package Version

@angular-devkit/architect 0.1202.14
@angular-devkit/build-angular 12.2.14
@angular-devkit/core 12.2.14
@angular-devkit/schematics 12.2.14
@angular/cdk 12.2.13
@angular/cli 12.2.14
@angular/flex-layout 12.0.0-beta.35
@angular/material 12.2.13
@angular/material-moment-adapter 12.2.13
@schematics/angular 12.2.14
rxjs 6.6.7
typescript 4.3.5

[crisbeto]

This is actually an issue with the docs. The clickable area will take up the width of the entire radio button, but the button itself is display: inline-block. It's so wide in the example, because we have a flex-direction: column.

[philmayfield]

I see, so anyone coming across this issue in the future, your mat-radio-button should not be a block element. Instead wrap it in a block element such as a div or li to prevent this behavior. Unable to fork on stackblitz at the moment, but effectively this:

<mat-radio-group
  aria-labelledby="example-radio-group-label"
  [(ngModel)]="favoriteSeason"
>
  <div *ngFor="let season of seasons">
    <mat-radio-button [value]="season">{{season}}</mat-radio-button>
  </div>
</mat-radio-group>

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