Skip to content

LOGIN-FOCUS: passwordless focuses email first, captcha only when email present#117

Merged
mvalancy merged 1 commit into
devfrom
fix/login-focus
Jun 18, 2026
Merged

LOGIN-FOCUS: passwordless focuses email first, captcha only when email present#117
mvalancy merged 1 commit into
devfrom
fix/login-focus

Conversation

@mvalancy

Copy link
Copy Markdown
Member

Fixes the passwordless-login focus order reported while dogfooding the live login page.

Bug: switching to the Passwordless tab put the cursor in the CAPTCHA, not the email field. CodeCaptcha focused its own input on mount unconditionally, and that effect ran after the email input's autoFocus, stealing focus.

Fix:

  • CodeCaptcha gets an autoFocus prop (default true, so every other caller is unchanged); the focus-on-mount effect is gated on it.
  • A pure, unit-tested helper (lib/loginFocus.ts) decides the target: email field when no email entered yet, captcha when an email is already present, nothing while inactive / after the link is sent.
  • Signin focuses the email field on entering passwordless mode and passes autoFocus to the captcha only when an email is present.

Tests: loginFocus 6/6 unit · tests/e2e/login-focus.spec.ts 2/2 live (empty→email, present→captcha) · web typecheck clean.

🤖 Generated with Claude Code

… email present

When switching to Passwordless sign-in, CodeCaptcha's mount effect grabbed focus
unconditionally (it ran after the email input's autoFocus), so the cursor landed
in the captcha even with an empty email. Make the captcha's focus-on-mount opt-in
(autoFocus prop, default true to preserve every other caller) and let Signin pick
the target via a pure, unit-tested helper: email field when no email entered yet,
captcha when an email is already present.

- packages/web/src/lib/loginFocus.ts (+ tests, 6/6): magicLinkFocusTarget / hasEnteredEmail
- CodeCaptcha: autoFocus prop gates the focus effect
- Signin: email ref + on-mode-entry focus effect; captcha autoFocus only when email present
- tests/e2e/login-focus.spec.ts (@loginfocus, 2/2 live): empty→email, present→captcha

Co-Authored-By: Claude Opus 4.8 (1M context) <noreply@anthropic.com>
@mvalancy mvalancy merged commit ada590f into dev Jun 18, 2026
10 of 11 checks passed
@mvalancy mvalancy deleted the fix/login-focus branch June 18, 2026 16:52
@github-actions

Copy link
Copy Markdown

🧪 Comprehensive Test Suite

  • Unit suites (Node 18.x & 20.x) — core, web, server, mcp-server: ✅ passed
  • Installer & deploy config: ✅ passed

Full-stack smoke gate runs in the CI workflow.

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment

Labels

None yet

Projects

None yet

Development

Successfully merging this pull request may close these issues.

1 participant