From de7fed83c492c8c39073e04849d904c447b7bf7f Mon Sep 17 00:00:00 2001
From: George Desipris <george.desipris.56@gmail.com>
Date: Wed, 4 Oct 2023 14:29:52 +0300
Subject: [PATCH] fix(clerk-js): Correctly auto switch and paste when typing a
 phone number on the email field

---
 .changeset/real-zebras-perform.md                |  5 +++++
 .../src/ui/components/SignIn/SignInStart.tsx     | 16 +++++-----------
 2 files changed, 10 insertions(+), 11 deletions(-)
 create mode 100644 .changeset/real-zebras-perform.md

diff --git a/.changeset/real-zebras-perform.md b/.changeset/real-zebras-perform.md
new file mode 100644
index 00000000000..48208ceb3ee
--- /dev/null
+++ b/.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.
\ No newline at end of file
diff --git a/packages/clerk-js/src/ui/components/SignIn/SignInStart.tsx b/packages/clerk-js/src/ui/components/SignIn/SignInStart.tsx
index 5b893c9b6a1..3a38697453f 100644
--- a/packages/clerk-js/src/ui/components/SignIn/SignInStart.tsx
+++ b/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;