From 81380d2e939ebb63c3e35e90fbb05f835684ae13 Mon Sep 17 00:00:00 2001 From: Kristiyan Kostadinov Date: Fri, 1 Feb 2019 21:50:14 +0100 Subject: [PATCH] fix(radio): unable to click to select button if text is marked (#14967) 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. --- src/lib/radio/radio.scss | 8 ++++++++ 1 file changed, 8 insertions(+) diff --git a/src/lib/radio/radio.scss b/src/lib/radio/radio.scss index 2d867d5eb742..b1e1f310220c 100644 --- a/src/lib/radio/radio.scss +++ b/src/lib/radio/radio.scss @@ -1,5 +1,6 @@ @import '../core/style/variables'; @import '../core/ripple/ripple'; +@import '../core/style/vendor-prefixes'; @import '../../cdk/a11y/a11y'; @@ -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; @@ -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;