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 `` component after autoswitching to the phone number field. The issue was introduced with the changes for the Prefill `` and `` 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;