fix(experience): smart input field should have correct initial type (#6477)

packages/experience/src/components/InputFields/SmartInputField/use-smart-input-field.ts

@@ -7,6 +7,8 @@ import useUpdateEffect from '@/hooks/use-update-effect';
 import { getDefaultCountryCallingCode } from '@/utils/country-code';
 import { parseIdentifierValue } from '@/utils/form';
 
+import { detectIdentifierType } from './utils';
+
 export type IdentifierInputType =
   | SignInIdentifier.Email
   | SignInIdentifier.Phone
@@ -24,8 +26,6 @@ export type IdentifierInputValue = {
   value: string;
 };
 
-const digitsRegex = /^\d*$/;
-
 type Props = {
   defaultValue?: string;
   _defaultType?: IdentifierInputType;
@@ -56,7 +56,14 @@ const useSmartInputField = ({ _defaultType, defaultValue, enabledTypes }: Props)
     [defaultType, defaultValue]
   );
 
-  const [currentType, setCurrentType] = useState(defaultType);
+  const [currentType, setCurrentType] = useState(
+    detectIdentifierType({
+      value: defaultValue ?? '',
+      enabledTypeSet,
+      defaultType,
+      currentType: defaultType,
+    })
+  );
 
   const [countryCode, setCountryCode] = useState<string>(
     defaultCountryCode ?? getDefaultCountryCallingCode()
@@ -65,41 +72,7 @@ const useSmartInputField = ({ _defaultType, defaultValue, enabledTypes }: Props)
   const [inputValue, setInputValue] = useState<string>(defaultInputValue ?? '');
 
   const detectInputType = useCallback(
-    (value: string) => {
+    (value: string) => detectIdentifierType({ value, enabledTypeSet, defaultType, currentType }),
-      // Reset InputType
-      if (!value && enabledTypeSet.size > 1) {
-        return;
-      }
-
-      if (enabledTypeSet.size === 1) {
-        return defaultType;
-      }
-
-      const hasAtSymbol = value.includes('@');
-      const isAllDigits = digitsRegex.test(value);
-
-      if (enabledTypeSet.has(SignInIdentifier.Phone) && value.length >= 3 && isAllDigits) {
-        return SignInIdentifier.Phone;
-      }
-
-      if (enabledTypeSet.has(SignInIdentifier.Email) && hasAtSymbol) {
-        return SignInIdentifier.Email;
-      }
-
-      if (currentType === SignInIdentifier.Phone && isAllDigits) {
-        return SignInIdentifier.Phone;
-      }
-
-      if (enabledTypeSet.has(SignInIdentifier.Username)) {
-        return SignInIdentifier.Username;
-      }
-
-      if (enabledTypeSet.has(SignInIdentifier.Email)) {
-        return SignInIdentifier.Email;
-      }
-
-      return currentType;
-    },
     [defaultType, currentType, enabledTypeSet]
   );
 

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

@@ -40,3 +40,53 @@ export const getInputHtmlProps = (
     label: enabledTypes.map((type) => i18next.t(identifierInputPlaceholderMap[type])).join(' / '),
   };
 };
+
+const digitsRegex = /^\d*$/;
+
+type DetectIdentifierTypeParams = {
+  value: string;
+  enabledTypeSet: Set<IdentifierInputType>;
+  defaultType?: IdentifierInputType;
+  currentType?: IdentifierInputType;
+};
+
+export const detectIdentifierType = ({
+  value,
+  enabledTypeSet,
+  defaultType,
+  currentType,
+}: DetectIdentifierTypeParams) => {
+  // Reset InputType
+  if (!value && enabledTypeSet.size > 1) {
+    return;
+  }
+
+  if (enabledTypeSet.size === 1) {
+    return defaultType;
+  }
+
+  const hasAtSymbol = value.includes('@');
+  const isAllDigits = digitsRegex.test(value);
+
+  if (enabledTypeSet.has(SignInIdentifier.Phone) && value.length >= 3 && isAllDigits) {
+    return SignInIdentifier.Phone;
+  }
+
+  if (enabledTypeSet.has(SignInIdentifier.Email) && hasAtSymbol) {
+    return SignInIdentifier.Email;
+  }
+
+  if (currentType === SignInIdentifier.Phone && isAllDigits) {
+    return SignInIdentifier.Phone;
+  }
+
+  if (enabledTypeSet.has(SignInIdentifier.Username)) {
+    return SignInIdentifier.Username;
+  }
+
+  if (enabledTypeSet.has(SignInIdentifier.Email)) {
+    return SignInIdentifier.Email;
+  }
+
+  return currentType;
+};