[InputBase] Declare global mui-auto-fill(-cancel) keyframes

Browser autofill workaround logic requires static animation name references for
keyframes. Enabling disableGlobal renames such keyframes unless they are marked
as global.

Author: Martin Jesper Low Madsen

packages/material-ui/src/InputBase/InputBase.js

@@ -28,6 +28,14 @@ export const styles = theme => {
   };
 
   return {
+    '@global': {
+      '@keyframes mui-auto-fill': {
+        from: {},
+      },
+      '@keyframes mui-auto-fill-cancel': {
+        from: {},
+      },
+    },
     /* Styles applied to the root element. */
     root: {
       // Mimics the default input display property used by browsers for an input.
@@ -87,7 +95,7 @@ export const styles = theme => {
       // Make the flex item shrink with Firefox
       minWidth: 0,
       width: '100%', // Fix IE 11 width issue
-      animationName: '$auto-fill-cancel',
+      animationName: 'mui-auto-fill-cancel',
       '&::-webkit-input-placeholder': placeholder,
       '&::-moz-placeholder': placeholder, // Firefox 19+
       '&:-ms-input-placeholder': placeholder, // IE 11
@@ -119,15 +127,9 @@ export const styles = theme => {
       },
       '&:-webkit-autofill': {
         animationDuration: '5000s',
-        animationName: '$auto-fill',
+        animationName: 'mui-auto-fill',
       },
     },
-    '@keyframes auto-fill': {
-      from: {},
-    },
-    '@keyframes auto-fill-cancel': {
-      from: {},
-    },
     /* Styles applied to the `input` element if `margin="dense"`. */
     inputMarginDense: {
       paddingTop: 4 - 1,
@@ -388,7 +390,7 @@ const InputBase = React.forwardRef(function InputBase(props, ref) {
   const handleAutoFill = event => {
     // Provide a fake value as Chrome might not let you access it for security reasons.
     checkDirty(
-      event.animationName.indexOf('auto-fill-cancel') !== -1 ? inputRef.current : { value: 'x' },
+      event.animationName === 'mui-auto-fill-cancel' ? inputRef.current : { value: 'x' },
     );
   };