Skip to content

Commit 160e576

Browse files
committed
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.
1 parent 3e10809 commit 160e576

File tree

1 file changed

+7
-0
lines changed

1 file changed

+7
-0
lines changed

src/material/select/select.scss

Lines changed: 7 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -83,6 +83,13 @@ $placeholder-arrow-space: 2 * ($arrow-size + $arrow-margin);
8383
border-right: $arrow-size solid transparent;
8484
border-top: $arrow-size solid;
8585
margin: 0 $arrow-margin;
86+
87+
// On Safari the arrow won't necessarily get redrawn when the form field is focused or blurred,
88+
// which means that its highlighted styling will be stuck in an incorrect state. We can get
89+
// Safari to redraw it by adding a transform.
90+
.mat-form-field.mat-focused & {
91+
transform: translateX(0);
92+
}
8693
}
8794

8895
.mat-select-panel-wrap {

0 commit comments

Comments
 (0)