fix(ui): Stop SignIn switching back to phone on the first "Use email" click

.changeset/sign-in-phone-prefill-email-toggle.md

@@ -0,0 +1,5 @@
+---
+'@clerk/ui': patch
+---
+
+Fix `<SignIn />` 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.

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(),

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(<SignInStart />, { 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();