<SignIn />: first "Use email" click switches back to phone when `initialValues.phoneNumber` is set

オープン 初心者向け
  • 何か問題がありますか？
#10,487 コメント 0 件 リアクション 0 件 担当者 0 名 GitHub で見る

メンテナーはふだん 1 日以内に返信

@twicestruck がすでに取り組んでいます。

2026年10月28日 から。

  • #10488 @twicestruck による — オープン

評価

難易度
2/5
見積もり時間
1〜3時間
初心者へのやさしさ
74/100
issue の種類
バグ
明瞭さ
明確に書かれている
活発さ
活発
技術スタック
react, typescript
領域
authentication, frontend

調査の方向性

まず packages/ui/src/components/SignIn/SignInStart.tsx を確認し、特に textIdentifierField の初期化と issue で説明されている自動入力の effect を調べてください。「メールを使用」をクリックしたときに handlePhoneNumberPaste とどう連携するかを追跡してください。再現リンクを使って動作を確認できます。最初のクリックで電話番号が事前入力されたメールフィールドが表示され、このケースを回帰テストでカバーできたら完了です。

索引モデルが issue の本文から書いたものです。

説明

Preliminary Checks
Reproduction

https://github.com/twicestruck/clerk-signin-phone-prefill-repro

Publishable key

pk_test_ZXhwZXJ0LXVuaWNvcm4tNzgyOC5jbGVyay5hY2NvdW50cy5kZXYk

Description

With email and phone both enabled as sign-in identifiers, <SignIn initialValues={{ phoneNumber: '+15555550100' }} /> opens on the phone field as expected, but the first "Use email" click switches straight back to the phone field. The second click works.

Steps to reproduce:

  1. Run the reproduction with the publishable key above
  2. Click "Use email" once

Expected behavior:

The email field shows.

Actual behavior:

The form switches back to the phone field.

Cause: when the form starts on the phone field, SignInStart seeds textIdentifierField with initialValues[identifierAttribute], which is the phone number (source). After the switch, the autofill effect sees a value starting with + and calls handlePhoneNumberPaste, which switches back to the phone field and clears the email field, so the second click sticks. A prefilled number without + shows up in the email field instead.

I'll open a PR with a fix and a test.

Environment
System:
  OS: macOS 27.0.1
  CPU: (18) arm64 Apple M5 Max
  Memory: 157.16 MB / 36.00 GB
  Shell: 5.9 - /bin/zsh
Binaries:
  Node: 24.22.0
  npm: 11.19.1
  pnpm: 12.14.0
  bun: 1.4.3
Browsers:
  Brave Browser: 155.1.97.59
  Chrome: 155.0.8059.85
  Chrome Canary: 158.0.8110.0
  Firefox: 158.0
  Safari: 27.0.1
npmPackages:
  @clerk/react: 6.18.3 => 6.18.3
  @vitejs/plugin-react: 6.1.2 => 6.1.2
  react: 19.3.1 => 19.3.1
  react-dom: 19.3.1 => 19.3.1
  vite: 8.3.5 => 8.3.5
主要言語
TypeScript
スター
1.8k
フォーク
484
平均マージ
1日 20時間
マージ済み PR（30日）
363

環境構築

はじめの一歩

  1. issue を最後まで読み、次にプロジェクトのコントリビューションガイドを読みます。
  2. 着手することを issue にコメントします — 二人が同じ作業をするのを防げます。
  3. リポジトリをフォークし、ブランチを切って変更します。
  4. issue 番号を参照したプルリクエストを送ります。

clerk/javascript のほかの issue

clerk/javascript の issue をすべて見る

似ている issue

TypeScript の issue をもっと見る

新しい issue をメールで受け取る

初心者向けの GitHub issue を短くまとめたダイジェスト。