fix(cdk/text-field): fix autofill listener on Chrome 80 (#18468)

mmalerba · andrewseguin · commit 8e43b4816720 · 2020-02-20T10:55:07.000-08:00
* fix(cdk/text-field): fix autofill listener on Chrome 80 * address feedback and fix lint (cherry picked from commit 4b329f0)
diff --git a/.stylelintrc.json b/.stylelintrc.json
@@ -44,7 +44,7 @@
 
     "unit-case": "lower",
     "unit-no-unknown": true,
-    "unit-whitelist": ["px", "%", "deg", "ms", "em", "vh", "vw", "vmin"],
+    "unit-whitelist": ["px", "%", "deg", "s", "ms", "em", "vh", "vw", "vmin"],
 
     "value-list-comma-space-after": "always-single-line",
     "value-list-comma-space-before": "never",
diff --git a/src/cdk/text-field/_text-field.scss b/src/cdk/text-field/_text-field.scss
@@ -8,11 +8,13 @@
   @keyframes cdk-text-field-autofill-end {/*!*/}
 
   .cdk-text-field-autofill-monitored:-webkit-autofill {
-    animation-name: cdk-text-field-autofill-start;
+    // Since Chrome 80 we need a 1ms delay, or the animationstart event won't fire.
+    animation: cdk-text-field-autofill-start 0s 1ms;
   }
 
   .cdk-text-field-autofill-monitored:not(:-webkit-autofill) {
-    animation-name: cdk-text-field-autofill-end;
+    // Since Chrome 80 we need a 1ms delay, or the animationstart event won't fire.
+    animation: cdk-text-field-autofill-end 0s 1ms;
   }
 
   // Remove the resize handle on autosizing textareas, because whatever height
@@ -49,13 +51,14 @@ $cdk-text-field-autofill-color-frame-count: 0;
   }
 
   &:-webkit-autofill {
-    animation-name: cdk-text-field-autofill-color-#{$cdk-text-field-autofill-color-frame-count};
-    animation-fill-mode: both;
+    animation: cdk-text-field-autofill-color-#{$cdk-text-field-autofill-color-frame-count} both;
   }
 
   &.cdk-text-field-autofill-monitored:-webkit-autofill {
-    animation-name: cdk-text-field-autofill-start,
-                    cdk-text-field-autofill-color-#{$cdk-text-field-autofill-color-frame-count};
+    // Since Chrome 80 we need a 1ms delay for cdk-text-field-autofill-start, or the animationstart
+    // event won't fire.
+    animation: cdk-text-field-autofill-start 0s 1ms,
+               cdk-text-field-autofill-color-#{$cdk-text-field-autofill-color-frame-count} both;
   }
 
   $cdk-text-field-autofill-color-frame-count:

Original file line number	Diff line number	Diff line change
`@@ -8,11 +8,13 @@`
`8`	`8`	`@keyframes cdk-text-field-autofill-end {/!/}`
`9`	`9`
`10`	`10`	`.cdk-text-field-autofill-monitored:-webkit-autofill {`
`11`		`- animation-name: cdk-text-field-autofill-start;`
	`11`	`+ // Since Chrome 80 we need a 1ms delay, or the animationstart event won't fire.`
	`12`	`+ animation: cdk-text-field-autofill-start 0s 1ms;`
`12`	`13`	`}`
`13`	`14`
`14`	`15`	`.cdk-text-field-autofill-monitored:not(:-webkit-autofill) {`
`15`		`- animation-name: cdk-text-field-autofill-end;`
	`16`	`+ // Since Chrome 80 we need a 1ms delay, or the animationstart event won't fire.`
	`17`	`+ animation: cdk-text-field-autofill-end 0s 1ms;`
`16`	`18`	`}`
`17`	`19`
`18`	`20`	`// Remove the resize handle on autosizing textareas, because whatever height`
`@@ -49,13 +51,14 @@ $cdk-text-field-autofill-color-frame-count: 0;`
`49`	`51`	`}`
`50`	`52`
`51`	`53`	`&:-webkit-autofill {`
`52`		`- animation-name: cdk-text-field-autofill-color-#{$cdk-text-field-autofill-color-frame-count};`
`53`		`- animation-fill-mode: both;`
	`54`	`+ animation: cdk-text-field-autofill-color-#{$cdk-text-field-autofill-color-frame-count} both;`
`54`	`55`	`}`
`55`	`56`
`56`	`57`	`&.cdk-text-field-autofill-monitored:-webkit-autofill {`
`57`		`- animation-name: cdk-text-field-autofill-start,`
`58`		`- cdk-text-field-autofill-color-#{$cdk-text-field-autofill-color-frame-count};`
	`58`	`+ // Since Chrome 80 we need a 1ms delay for cdk-text-field-autofill-start, or the animationstart`
	`59`	`+ // event won't fire.`
	`60`	`+ animation: cdk-text-field-autofill-start 0s 1ms,`
	`61`	`+ cdk-text-field-autofill-color-#{$cdk-text-field-autofill-color-frame-count} both;`
`59`	`62`	`}`
`60`	`63`
`61`	`64`	`$cdk-text-field-autofill-color-frame-count:`