Skip to content

Commit

Permalink
fix(radio): unable to click to select button if text is marked (#14967)
Browse files Browse the repository at this point in the history
Fixes not being able to select a radio button by clicking on it, if part of the text of the label is marked.

Fixes #14753.
  • Loading branch information
crisbeto authored and mmalerba committed Feb 1, 2019
1 parent 085bbb7 commit 5846038
Showing 1 changed file with 8 additions and 0 deletions.
8 changes: 8 additions & 0 deletions src/lib/radio/radio.scss
Original file line number Diff line number Diff line change
@@ -1,5 +1,6 @@
@import '../core/style/variables';
@import '../core/ripple/ripple';
@import '../core/style/vendor-prefixes';
@import '../../cdk/a11y/a11y';


Expand All @@ -16,6 +17,10 @@ $mat-radio-ripple-radius: 20px;
// Inner label container, wrapping entire element.
// Enables focus by click.
.mat-radio-label {
// Disable text selection on the label itself, because having text selected
// will prevent focus from reaching the label. Below we'll re-enable it only
// for the label's content so that people can still select the text.
@include user-select(none);
cursor: pointer;
display: inline-flex;
align-items: center;
Expand Down Expand Up @@ -87,6 +92,9 @@ $mat-radio-ripple-radius: 20px;

// Text label next to radio.
.mat-radio-label-content {
// Re-enable text selection for the button's content since
// we disabled it above in the `.mat-radio-label`.
@include user-select(auto);
display: inline-block;
order: 0;
line-height: inherit;
Expand Down

0 comments on commit 5846038

Please sign in to comment.