From 20c27c7fb167a5b95f3628700559acb85681814d Mon Sep 17 00:00:00 2001 From: Kristiyan Kostadinov Date: Tue, 5 Feb 2019 16:22:39 +0100 Subject: [PATCH] fix(checkbox): unable to click to select if text is marked (#15062) Fixes not being able to select a checkbox button by clicking on it, if part of the text of the label is marked. Also fixes text inside the checkbox being marked if the user clicks on it quickly. Relates to #14967. --- src/lib/checkbox/checkbox.scss | 12 ++++++++++++ 1 file changed, 12 insertions(+) diff --git a/src/lib/checkbox/checkbox.scss b/src/lib/checkbox/checkbox.scss index e650352f52c..24174c12e37 100644 --- a/src/lib/checkbox/checkbox.scss +++ b/src/lib/checkbox/checkbox.scss @@ -3,6 +3,7 @@ @import '../core/style/checkbox-common'; @import '../core/ripple/ripple'; @import '../core/style/layout-common'; +@import '../core/style/vendor-prefixes'; @import '../core/style/noop-animation'; @import '../../cdk/a11y/a11y'; @@ -189,6 +190,11 @@ $_mat-checkbox-mark-stroke-size: 2 / 15 * $mat-checkbox-size !default; } .mat-checkbox-layout { + // 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: inherit` ensures that the wrapper element gets the same cursor as the mat-checkbox // (e.g. pointer by default, regular when disabled), instead of the browser default. cursor: inherit; @@ -198,6 +204,12 @@ $_mat-checkbox-mark-stroke-size: 2 / 15 * $mat-checkbox-size !default; white-space: nowrap; } +.mat-checkbox-label { + // Re-enable text selection for the checkbox's content since + // we disabled it above in the `.mat-checkbox-layout`. + @include user-select(auto); +} + .mat-checkbox-inner-container { display: inline-block; height: $mat-checkbox-size;