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.

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 {