From 0971e39485e416a33b5f8e6f3797cc7f003cc600 Mon Sep 17 00:00:00 2001 From: Kristiyan Kostadinov Date: Wed, 26 Oct 2022 07:19:21 +0200 Subject: [PATCH] fix(material/datepicker): unable to click datepicker toggle when form field is disabled (#25863) We support the case where the form field is disabled, but the datepicker isn't. Currently this is broken, because MDC sets `pointer-events: none` on the entire form field when it is disabled. These changes add `pointer-events: auto` only on the toggle to enable clicking. (cherry picked from commit fe4410784cb89aa983574fe8feb78e5cdf82fa96) --- src/material/datepicker/datepicker-toggle.scss | 6 ++++++ 1 file changed, 6 insertions(+) diff --git a/src/material/datepicker/datepicker-toggle.scss b/src/material/datepicker/datepicker-toggle.scss index 9c8db69f9218..87dbc43311a7 100644 --- a/src/material/datepicker/datepicker-toggle.scss +++ b/src/material/datepicker/datepicker-toggle.scss @@ -1,5 +1,11 @@ @use '@angular/cdk'; +// We support the case where the form field is disabled, but the datepicker is not. +// MDC sets `pointer-events: none` on disabled form fields which prevents clicks on the toggle. +.mat-datepicker-toggle { + pointer-events: auto; +} + @include cdk.high-contrast(active, off) { .mat-datepicker-toggle-default-icon { // On Chromium-based browsers the icon doesn't appear to inherit the text color in high