From b88a7b258423678712e3910e69aa1cf56fa1405e Mon Sep 17 00:00:00 2001
From: Olivier Tassinari <olivier.tassinari@gmail.com>
Date: Sun, 22 Sep 2024 00:50:38 +0200
Subject: [PATCH] [Input] Improve auto-fill logic detection

---
 .../getting-started/templates/sign-in-side/SignInCard.tsx   | 6 ++++--
 packages/mui-material/src/InputBase/InputBase.js            | 5 +++--
 2 files changed, 7 insertions(+), 4 deletions(-)

diff --git a/docs/data/material/getting-started/templates/sign-in-side/SignInCard.tsx b/docs/data/material/getting-started/templates/sign-in-side/SignInCard.tsx
index 1d7c67ae007f25..d3aefc0e63e02e 100644
--- a/docs/data/material/getting-started/templates/sign-in-side/SignInCard.tsx
+++ b/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="your@email.com"
             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="••••••"
diff --git a/packages/mui-material/src/InputBase/InputBase.js b/packages/mui-material/src/InputBase/InputBase.js
index 7333c1c4f32cf5..494c53a9c7b2f5 100644
--- a/packages/mui-material/src/InputBase/InputBase.js
+++ b/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' });
   };