Skip to content

Commit 1d5175b

Browse files
authored
fix(material/select): arrow highlighted state not updating in Safari (#15281)
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 6d8693d commit 1d5175b

File tree

1 file changed

+7
-0
lines changed

1 file changed

+7
-0
lines changed

src/material/select/select.scss

+7
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)