refactor(GCOM-1528): prevent overlap between autofilled data and inpu…

…t label on the sign-in page
graphcommerce-org · Nov 11, 2024 · f2dad96 · f2dad96
1 parent 7831a40
commit f2dad96
Show file tree

Hide file tree

Showing 2 changed files with 7 additions and 3 deletions.
diff --git a/packages/magento-customer/components/AccountSignInUpForm/AccountSignInUpForm.tsx b/packages/magento-customer/components/AccountSignInUpForm/AccountSignInUpForm.tsx
@@ -153,7 +153,9 @@ export function AccountSignInUpForm(props: AccountSignInUpFormProps) {
                 control={control}
                 name='email'
                 required
-                InputLabelProps={{ shrink: true }}
+                // Fixes an issue where the label doesn't shrink as expected when the field is autofilled by the browser.
+                // Using shrink based on the presence of 'email' forces the label to behave correctly even with autofill.
+                InputLabelProps={{ shrink: !!watch('email') }}
                 InputProps={{
                   endAdornment:
                     mode === 'session-expired' ? (

diff --git a/packages/magento-customer/components/SignInForm/SignInForm.tsx b/packages/magento-customer/components/SignInForm/SignInForm.tsx
@@ -13,7 +13,7 @@ export function SignInForm(props: SignInFormProps) {
 
   const form = useSignInForm({ email })
 
-  const { handleSubmit, required, formState, error, control } = form
+  const { handleSubmit, required, formState, error, control, watch } = form
   const [remainingError, authError] = graphqlErrorByCategory({
     category: 'graphql-authentication',
     error,
@@ -35,7 +35,9 @@ export function SignInForm(props: SignInFormProps) {
           required={required.password}
           disabled={formState.isSubmitting}
           helperText={!!formState.errors.password || authError?.message}
-          InputLabelProps={{ shrink: true }}
+          // Fixes an issue where the label doesn't shrink as expected when the field is autofilled by the browser.
+          // Using shrink based on the presence of 'password' forces the label to behave correctly even with autofill.
+          InputLabelProps={{ shrink: !!watch('password') }}
           InputProps={{
             endAdornment: (
               <Link href='/account/forgot-password' underline='hover' sx={{ whiteSpace: 'nowrap' }}>