fix(select): arrow highlighted state not updating in Safari

crisbeto · crisbeto · commit f25e89a304e9 · 2019-05-27T15:14:57.000+02:00
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.
diff --git a/src/material/select/select.scss b/src/material/select/select.scss
@@ -72,6 +72,13 @@ $mat-select-placeholder-arrow-space: 2 * ($mat-select-arrow-size + $mat-select-a
   ._mat-animation-noopable.mat-form-field-appearance-standard .mat-select.mat-select-empty & {
     transition: none;
   }
+
+  // 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-arrow {

Original file line number	Diff line number	Diff line change
`@@ -72,6 +72,13 @@ $mat-select-placeholder-arrow-space: 2 * ($mat-select-arrow-size + $mat-select-a`
`72`	`72`	`._mat-animation-noopable.mat-form-field-appearance-standard .mat-select.mat-select-empty & {`
`73`	`73`	`transition: none;`
`74`	`74`	`}`
	`75`	`+`
	`76`	`+ // On Safari the arrow won't necessarily get redrawn when the form field is focused or blurred,`
	`77`	`+ // which means that its highlighted styling will be stuck in an incorrect state. We can get`
	`78`	`+ // Safari to redraw it by adding a transform.`
	`79`	`+ .mat-form-field.mat-focused & {`
	`80`	`+ transform: translateX(0);`
	`81`	`+ }`
`75`	`82`	`}`
`76`	`83`
`77`	`84`	`.mat-select-arrow {`