diff --git a/.changeset/sign-in-phone-prefill-email-toggle.md b/.changeset/sign-in-phone-prefill-email-toggle.md new file mode 100644 index 00000000000..4b1dc42062d --- /dev/null +++ b/.changeset/sign-in-phone-prefill-email-toggle.md @@ -0,0 +1,5 @@ +--- +'@clerk/ui': patch +--- + +Fix `` switching back to the phone number field on the first "Use email" click when `initialValues.phoneNumber` is set. The prefilled phone number no longer ends up in the email field. diff --git a/packages/ui/src/components/SignIn/SignInStart.tsx b/packages/ui/src/components/SignIn/SignInStart.tsx index d3e9d806bcb..69ae02392c9 100644 --- a/packages/ui/src/components/SignIn/SignInStart.tsx +++ b/packages/ui/src/components/SignIn/SignInStart.tsx @@ -168,7 +168,8 @@ function SignInStartInternal(): JSX.Element { // When the captcha escalates to an interactive challenge, spotlight it by collapsing/inerting the // rest of the card (see the descriptors.main column below). const [captchaIsInteractive, setCaptchaIsInteractive] = useState(false); - const textIdentifierField = useFormControl('identifier', initialValues[identifierAttribute] || '', { + const textIdentifierInitialValue = identifierAttribute === 'phone_number' ? '' : initialValues[identifierAttribute]; + const textIdentifierField = useFormControl('identifier', textIdentifierInitialValue || '', { ...currentIdentifier, isRequired: true, transformer: value => value.trim(), diff --git a/packages/ui/src/components/SignIn/__tests__/SignInStart.test.tsx b/packages/ui/src/components/SignIn/__tests__/SignInStart.test.tsx index fe66c6e12db..0329b8119cf 100644 --- a/packages/ui/src/components/SignIn/__tests__/SignInStart.test.tsx +++ b/packages/ui/src/components/SignIn/__tests__/SignInStart.test.tsx @@ -705,6 +705,19 @@ describe('SignInStart', () => { screen.getByDisplayValue(/691 1111111/i); }); + it('switches to the email field on the first click when phoneNumber is prefilled', async () => { + const { wrapper, props } = await createFixtures(f => { + f.withEmailAddress(); + f.withPhoneNumber(); + }); + props.setProps({ initialValues: { phoneNumber: '+306911111111' } }); + + render(, { wrapper }); + fireEvent.click(screen.getByText(/use email/i)); + + expect(screen.getByRole('textbox', { name: /email address/i })).toHaveValue(''); + }); + it('prefills the username field with the correct initial value', async () => { const { wrapper, props } = await createFixtures(f => { f.withUsername();