[InputBase] Fix remaining issues with Chrome autofill (#17552)

mui · Sep 25, 2019 · 17025b3 · 17025b3
1 parent f67c201
commit 17025b3
Showing 1 changed file with 8 additions and 2 deletions.
diff --git a/packages/material-ui/src/InputBase/InputBase.js b/packages/material-ui/src/InputBase/InputBase.js
@@ -86,6 +86,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',
       '&::-webkit-input-placeholder': placeholder,
       '&::-moz-placeholder': placeholder, // Firefox 19+
       '&:-ms-input-placeholder': placeholder, // IE 11
@@ -123,6 +124,9 @@ export const styles = theme => {
     '@keyframes auto-fill': {
       from: {},
     },
+    '@keyframes auto-fill-cancel': {
+      from: {},
+    },
     /* Styles applied to the `input` element if `margin="dense"`. */
     inputMarginDense: {
       paddingTop: 4 - 1,
@@ -372,9 +376,11 @@ const InputBase = React.forwardRef(function InputBase(props, ref) {
     };
   }
 
-  const handleAutoFill = () => {
+  const handleAutoFill = event => {
     // Provide a fake value as Chrome might not let you access it for security reasons.
-    checkDirty({ value: 'x' });
+    checkDirty(
+      event.animationName.indexOf('auto-fill-cancel') !== -1 ? inputRef.current : { value: 'x' },
+    );
   };
 
   return (