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;