fix(clerk-js): Correctly auto switch and paste when typing a phone nu…

.changeset/real-zebras-perform.md

@@ -0,0 +1,5 @@
+---
+'@clerk/clerk-js': patch
+---
+
+Fixes an issue where the phone number value was not properly copied onto the input when pasting on the email or username field in the `<SignIn/>` component after autoswitching to the phone number field. The issue was introduced with the changes for the Prefill `<SignIn/>` and `<SignUp/>` feature.

packages/clerk-js/src/ui/components/SignIn/SignInStart.tsx

@@ -96,9 +96,12 @@ export function _SignInStart(): JSX.Element {
       i => identifierAttributes[(identifierAttributes.indexOf(i) + 1) % identifierAttributes.length],
     );
     setShouldAutofocus(true);
+    setHasSwitchedByAutofill(false);
   };
 
-  const switchToPhoneInput = () => {
+  const handlePhoneNumberPaste = (value: string) => {
+    textIdentifierField.setValue(initialValues[identifierAttribute] || '');
+    phoneIdentifierField.setValue(value);
     setIdentifierAttribute('phone_number');
     setShouldAutofocus(true);
   };
@@ -114,22 +117,13 @@ export function _SignInStart(): JSX.Element {
       identifierAttribute !== 'phone_number' &&
       !hasSwitchedByAutofill
     ) {
-      switchToPhoneInput();
+      handlePhoneNumberPaste(identifierField.value);
       // do not switch automatically on subsequent autofills
       // by the browser to avoid a switch loop
       setHasSwitchedByAutofill(true);
     }
   }, [identifierField.value, identifierAttributes]);
 
-  useLayoutEffect(() => {
-    if (identifierAttribute === 'phone_number' && identifierField.value) {
-      //value should be kept as we have auto-switched to the phone input
-      return;
-    }
-
-    identifierField.setValue(initialValues[identifierAttribute] || '');
-  }, [identifierAttribute]);
-
   useEffect(() => {
     if (!organizationTicket) {
       return;