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.

(cherry picked from commit 1d5175b)

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 {