From e01f8b0a9365a46b0f40591b064c800d53f76b71 Mon Sep 17 00:00:00 2001 From: Kristiyan Kostadinov Date: Mon, 21 Feb 2022 08:00:57 +0100 Subject: [PATCH] fix(material/select): arrow highlighted state not updating in Safari Fixes the color of the select arrow not updating correctly when focusing and blurring in Safari. It seems like Safari wasn't recalculating the styles, for some reason. --- src/material/select/select.scss | 7 +++++++ 1 file changed, 7 insertions(+) diff --git a/src/material/select/select.scss b/src/material/select/select.scss index 82bd3a49f23c..94c310ec6af4 100644 --- a/src/material/select/select.scss +++ b/src/material/select/select.scss @@ -83,6 +83,13 @@ $placeholder-arrow-space: 2 * ($arrow-size + $arrow-margin); border-right: $arrow-size solid transparent; border-top: $arrow-size solid; margin: 0 $arrow-margin; + + // On Safari the arrow won't necessarily get redrawn when the form field is focused or blurred, + // which means that its highlighted styling will be stuck in an incorrect state. We can get + // Safari to redraw it by adding a transform. + .mat-form-field.mat-focused & { + transform: translateX(0); + } } .mat-select-panel-wrap {