[Input] Improve auto-fill logic detection

docs/data/material/getting-started/templates/sign-in-side/SignInCard.tsx

@@ -36,6 +36,8 @@ const Card = styled(MuiCard)(({ theme }) => ({
 
 export default function SignInCard() {
   const [emailError, setEmailError] = React.useState(false);
+  const [value, setValue] = React.useState('');
+  console.log('value', value)
   const [emailErrorMessage, setEmailErrorMessage] = React.useState('');
   const [passwordError, setPasswordError] = React.useState(false);
   const [passwordErrorMessage, setPasswordErrorMessage] = React.useState('');
@@ -107,13 +109,13 @@ export default function SignInCard() {
         sx={{ display: 'flex', flexDirection: 'column', width: '100%', gap: 2 }}
       >
         <FormControl>
-          <FormLabel htmlFor="email">Email</FormLabel>
           <TextField
             error={emailError}
             helperText={emailErrorMessage}
             id="email"
             type="email"
             name="email"
+            label="email"
             placeholder="[email protected]"
             autoComplete="email"
             autoFocus
@@ -126,7 +128,6 @@ export default function SignInCard() {
         </FormControl>
         <FormControl>
           <Box sx={{ display: 'flex', justifyContent: 'space-between' }}>
-            <FormLabel htmlFor="password">Password</FormLabel>
             <Link
               component="button"
               type="button"
@@ -139,6 +140,7 @@ export default function SignInCard() {
           </Box>
           <TextField
             error={passwordError}
+            label="password"
             helperText={passwordErrorMessage}
             name="password"
             placeholder="••••••"

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

@@ -257,8 +257,8 @@ export const InputBaseInput = styled('input', {
 );
 
 const InputGlobalStyles = globalCss({
-  '@keyframes mui-auto-fill': { from: { display: 'block' } },
-  '@keyframes mui-auto-fill-cancel': { from: { display: 'block' } },
+  '@keyframes mui-auto-fill': {},
+  '@keyframes mui-auto-fill-cancel': {},
 });
 
 /**
@@ -495,6 +495,7 @@ const InputBase = React.forwardRef(function InputBase(inProps, ref) {
   }
 
   const handleAutoFill = (event) => {
+    console.log('event.animationName', props.id, event.animationName)
     // Provide a fake value as Chrome might not let you access it for security reasons.
     checkDirty(event.animationName === 'mui-auto-fill-cancel' ? inputRef.current : { value: 'x' });
   };