From ac95d691b71f2ab28c5d58d54f18b28e86aff281 Mon Sep 17 00:00:00 2001
From: Shant Yezekyan <11509523+twicestruck@users.noreply.github.com>
Date: Wed, 28 Oct 2026 13:39:07 +0400
Subject: [PATCH 1/2] fix(ui): Stop SignIn switching back to phone on the first
"Use email" click
---
.changeset/sign-in-phone-prefill-email-toggle.md | 5 +++++
packages/ui/src/components/SignIn/SignInStart.tsx | 4 +++-
.../SignIn/__tests__/SignInStart.test.tsx | 13 +++++++++++++
3 files changed, 21 insertions(+), 1 deletion(-)
create mode 100644 .changeset/sign-in-phone-prefill-email-toggle.md
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..d8ea2635162 100644
--- a/packages/ui/src/components/SignIn/SignInStart.tsx
+++ b/packages/ui/src/components/SignIn/SignInStart.tsx
@@ -168,7 +168,9 @@ 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] || '', {
+ // Never seed the text field with the phone number, as a leading "+" would switch back to the phone field.
+ 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();
From a20be9b783f8ef6e46ea53bf65150c9e2d615383 Mon Sep 17 00:00:00 2001
From: Shant Yezekyan <11509523+twicestruck@users.noreply.github.com>
Date: Wed, 28 Oct 2026 15:03:23 +0400
Subject: [PATCH 2/2] chore(ui): Remove inline comment
---
packages/ui/src/components/SignIn/SignInStart.tsx | 1 -
1 file changed, 1 deletion(-)
diff --git a/packages/ui/src/components/SignIn/SignInStart.tsx b/packages/ui/src/components/SignIn/SignInStart.tsx
index d8ea2635162..69ae02392c9 100644
--- a/packages/ui/src/components/SignIn/SignInStart.tsx
+++ b/packages/ui/src/components/SignIn/SignInStart.tsx
@@ -168,7 +168,6 @@ 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);
- // Never seed the text field with the phone number, as a leading "+" would switch back to the phone field.
const textIdentifierInitialValue = identifierAttribute === 'phone_number' ? '' : initialValues[identifierAttribute];
const textIdentifierField = useFormControl('identifier', textIdentifierInitialValue || '', {
...currentIdentifier,