From d5bac1560a5f8413467c38930dfbc0f55cc72433 Mon Sep 17 00:00:00 2001
From: simeng-li <simeng@silverhand.io>
Date: Wed, 22 Feb 2023 10:59:44 +0800
Subject: [PATCH] refactor(ui): properly set autocomplete props (#3175)

---
 .../components/InputFields/SmartInputField/index.tsx   |  2 +-
 .../InputFields/SmartInputField/utils.test.ts          |  5 +++++
 .../components/InputFields/SmartInputField/utils.ts    | 10 +++++++++-
 .../src/pages/Continue/IdentifierProfileForm/index.tsx |  2 +-
 .../pages/ForgotPassword/ForgotPasswordForm/index.tsx  |  1 -
 .../pages/Register/IdentifierRegisterForm/index.tsx    |  2 +-
 .../ui/src/pages/SignIn/IdentifierSignInForm/index.tsx |  1 -
 .../ui/src/pages/SignIn/PasswordSignInForm/index.tsx   |  1 -
 8 files changed, 17 insertions(+), 7 deletions(-)

diff --git a/packages/ui/src/components/InputFields/SmartInputField/index.tsx b/packages/ui/src/components/InputFields/SmartInputField/index.tsx
index 97cfdaa45..ac1668b5e 100644
--- a/packages/ui/src/components/InputFields/SmartInputField/index.tsx
+++ b/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 && (
diff --git a/packages/ui/src/components/InputFields/SmartInputField/utils.test.ts b/packages/ui/src/components/InputFields/SmartInputField/utils.test.ts
index 70391a360..03e610605 100644
--- a/packages/ui/src/components/InputFields/SmartInputField/utils.test.ts
+++ b/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');
     });
   });
 });
diff --git a/packages/ui/src/components/InputFields/SmartInputField/utils.ts b/packages/ui/src/components/InputFields/SmartInputField/utils.ts
index c95816df9..882f0a85e 100644
--- a/packages/ui/src/components/InputFields/SmartInputField/utils.ts
+++ b/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(' / '),
diff --git a/packages/ui/src/pages/Continue/IdentifierProfileForm/index.tsx b/packages/ui/src/pages/Continue/IdentifierProfileForm/index.tsx
index ac305a84d..2e7874925 100644
--- a/packages/ui/src/pages/Continue/IdentifierProfileForm/index.tsx
+++ b/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}
diff --git a/packages/ui/src/pages/ForgotPassword/ForgotPasswordForm/index.tsx b/packages/ui/src/pages/ForgotPassword/ForgotPasswordForm/index.tsx
index b83c2d545..02fbcb684 100644
--- a/packages/ui/src/pages/ForgotPassword/ForgotPasswordForm/index.tsx
+++ b/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}
diff --git a/packages/ui/src/pages/Register/IdentifierRegisterForm/index.tsx b/packages/ui/src/pages/Register/IdentifierRegisterForm/index.tsx
index f48a65e44..8bcc7f186 100644
--- a/packages/ui/src/pages/Register/IdentifierRegisterForm/index.tsx
+++ b/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}
diff --git a/packages/ui/src/pages/SignIn/IdentifierSignInForm/index.tsx b/packages/ui/src/pages/SignIn/IdentifierSignInForm/index.tsx
index 498883684..110d59d32 100644
--- a/packages/ui/src/pages/SignIn/IdentifierSignInForm/index.tsx
+++ b/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}
diff --git a/packages/ui/src/pages/SignIn/PasswordSignInForm/index.tsx b/packages/ui/src/pages/SignIn/PasswordSignInForm/index.tsx
index 4a4b37929..aee85ccc2 100644
--- a/packages/ui/src/pages/SignIn/PasswordSignInForm/index.tsx
+++ b/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}