refactor(ui): properly set autocomplete props (#3175)

packages/ui/src/components/InputFields/SmartInputField/index.tsx

@@ -62,11 +62,11 @@ const SmartInputField = (
 
   return (
     <InputField
+      {...getInputHtmlProps(enabledTypes, identifierType)}
       {...rest}
       ref={innerRef}
       isSuffixFocusVisible={Boolean(inputValue)}
       isPrefixVisible={identifierType === SignInIdentifier.Phone}
-      {...getInputHtmlProps(enabledTypes, identifierType)}
       value={inputValue}
       prefix={conditional(
         isPhoneEnabled && (

packages/ui/src/components/InputFields/SmartInputField/utils.test.ts

@@ -16,6 +16,7 @@ describe('Smart Input Field Util Methods', () => {
       expect(props.pattern).toBe('[0-9]*');
       expect(props.inputMode).toBe('numeric');
       expect(props.placeholder).toBe('input.phone_number');
+      expect(props.autoComplete).toBe('tel');
     });
 
     it('Should return correct html props for email', () => {
@@ -23,18 +24,21 @@ describe('Smart Input Field Util Methods', () => {
       expect(props.type).toBe('email');
       expect(props.inputMode).toBe('email');
       expect(props.placeholder).toBe('input.email');
+      expect(props.autoComplete).toBe('email');
     });
 
     it('Should return correct html props for username', () => {
       const props = getInputHtmlProps([SignInIdentifier.Username], SignInIdentifier.Username);
       expect(props.type).toBe('text');
       expect(props.placeholder).toBe('input.username');
+      expect(props.autoComplete).toBe('username');
     });
 
     it('Should return correct html props for username email or phone', () => {
       const props = getInputHtmlProps(enabledTypes, SignInIdentifier.Username);
       expect(props.type).toBe('text');
       expect(props.placeholder).toBe('input.username / input.email / input.phone_number');
+      expect(props.autoComplete).toBe('username email tel');
     });
 
     it('Should return correct html props for email or phone', () => {
@@ -44,6 +48,7 @@ describe('Smart Input Field Util Methods', () => {
       );
       expect(props.type).toBe('text');
       expect(props.placeholder).toBe('input.email / input.phone_number');
+      expect(props.autoComplete).toBe('email tel');
     });
   });
 });

packages/ui/src/components/InputFields/SmartInputField/utils.ts

@@ -10,12 +10,16 @@ import type { IdentifierInputType } from './use-smart-input-field';
 export const getInputHtmlProps = (
   enabledTypes: IdentifierInputType[],
   currentType?: IdentifierInputType
-): Pick<HTMLProps<HTMLInputElement>, 'type' | 'pattern' | 'inputMode' | 'placeholder'> => {
+): Pick<
+  HTMLProps<HTMLInputElement>,
+  'type' | 'pattern' | 'inputMode' | 'placeholder' | 'autoComplete'
+> => {
   if (currentType === SignInIdentifier.Phone && enabledTypes.length === 1) {
     return {
       type: 'tel',
       pattern: '[0-9]*',
       inputMode: 'numeric',
+      autoComplete: 'tel',
       placeholder: i18next.t<'translation', TFuncKey>('input.phone_number'),
     };
   }
@@ -24,12 +28,16 @@ export const getInputHtmlProps = (
     return {
       type: 'email',
       inputMode: 'email',
+      autoComplete: 'email',
       placeholder: i18next.t<'translation', TFuncKey>('input.email'),
     };
   }
 
   return {
     type: 'text',
+    autoComplete: enabledTypes
+      .map((type) => (type === SignInIdentifier.Phone ? 'tel' : type))
+      .join(' '),
     placeholder: enabledTypes
       .map((type) => i18next.t<'translation', TFuncKey>(identifierInputPlaceholderMap[type]))
       .join(' / '),

packages/ui/src/pages/Continue/IdentifierProfileForm/index.tsx

@@ -101,7 +101,7 @@ const IdentifierProfileForm = ({
         }}
         render={({ field }) => (
           <SmartInputField
-            autoComplete="new-identifier"
+            autoComplete="off"
             autoFocus={autoFocus}
             className={styles.inputField}
             {...field}

packages/ui/src/pages/ForgotPassword/ForgotPasswordForm/index.tsx

@@ -102,7 +102,6 @@ const ForgotPasswordForm = ({
         }}
         render={({ field }) => (
           <SmartInputField
-            autoComplete="identifier"
             autoFocus={autoFocus}
             className={styles.inputField}
             {...field}

packages/ui/src/pages/Register/IdentifierRegisterForm/index.tsx

@@ -89,7 +89,7 @@ const IdentifierRegisterForm = ({ className, autoFocus, signUpMethods }: Props)
         }}
         render={({ field }) => (
           <SmartInputField
-            autoComplete="new-identifier"
+            autoComplete="off"
             autoFocus={autoFocus}
             className={styles.inputField}
             {...field}

packages/ui/src/pages/SignIn/IdentifierSignInForm/index.tsx

@@ -87,7 +87,6 @@ const IdentifierSignInForm = ({ className, autoFocus, signInMethods }: Props) =>
         }}
         render={({ field }) => (
           <SmartInputField
-            autoComplete="identifier"
             autoFocus={autoFocus}
             className={styles.inputField}
             {...field}

packages/ui/src/pages/SignIn/PasswordSignInForm/index.tsx

@@ -96,7 +96,6 @@ const PasswordSignInForm = ({ className, autoFocus, signInMethods }: Props) => {
         }}
         render={({ field }) => (
           <SmartInputField
-            autoComplete="identifier"
             autoFocus={autoFocus}
             className={styles.inputField}
             {...field}