fix(auth): autofocus OTP input on verification step#4344
Open
monev1905 wants to merge 3 commits into
Open
Conversation
|
Someone is attempting to deploy a commit to the IndexLabs Team on Vercel. A member of the Team first needs to authorize it. |
The email-verification step renders the OTP input without focus, so users must click the field before typing the code. This is friction on every login, especially when switching accounts. Add `autoFocus` to the InputOTP so the cursor lands in the field as soon as the step mounts. Mirrors the existing email-step input and the mobile OTP component, both of which already autofocus.
monev1905
force-pushed
the
fix/autofocus-otp-input
branch
from
4cd2502 to
82c315d
Compare
Autofocusing the OTP input makes input-otp run its focus-time DOM measurement, which calls document.elementFromPoint. jsdom doesn't implement it, so the web login test threw an unhandled error. packages/views/test/setup.ts already stubs this for the same reason; mirror the stub in the web test setup (which already stubs ResizeObserver for input-otp).
Guards the autofocus behavior: the test fails if the autoFocus prop is removed from the verification-step InputOTP. Lives in packages/views since it covers shared component behavior, mocking @multica/core.
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment
1 participant
Add this suggestion to a batch that can be applied as a single commit.This suggestion is invalid because no changes were made to the code.Suggestions cannot be applied while the pull request is closed.Suggestions cannot be applied while viewing a subset of changes.Only one suggestion per line can be applied in a batch.Add this suggestion to a batch that can be applied as a single commit.Applying suggestions on deleted lines is not supported.You must change the existing code in this line in order to create a valid suggestion.Outdated suggestions cannot be applied.This suggestion has been applied or marked resolved.Suggestions cannot be applied from pending reviews.Suggestions cannot be applied on multi-line comments.Suggestions cannot be applied while the pull request is queued to merge.Suggestion cannot be applied right now. Please check back later.
What does this PR do?
The login email-verification step renders the OTP input without focus. On every login you have to click the field before you can type the code — small friction that's especially noticeable when switching between accounts repeatedly.
Thinking path: Multica is built for fast, repeated logins (account/workspace switching is a core flow), so the verification step is hit often. The email step's
<Input>on the same page already autofocuses, and the mobile OTP component (apps/mobile/app/(auth)/verify.tsx) already passesautoFocus— the web verification step was the only login input missing it. AddingautoFocusmakes the cursor land in the field as soon as the step mounts, consistent with the patterns already in the codebase.Related Issue
No existing issue — happy to open one if you'd prefer it tracked separately.
Type of Change
Changes Made
packages/views/auth/login-page.tsx: addautoFocusto theInputOTPon the verification (code) step.How to Test
/login, enter an email, submit.Before: field is unfocused, a click is required. After: the field is focused on mount.
Checklist
packages/viewslogin-page.test.tsx33/33,@multica/viewstypecheck clean)packages/viewstest asserting the OTP input is focused on mount of the verification step (fails if theautoFocusprop is removed)AI Disclosure
AI tool used: Claude Code (Opus)
Prompt / approach: I reported the UX annoyance — the OTP field isn't focused when the verification step opens, so I have to click it every time I switch accounts. Claude located the
InputOTPinpackages/views/auth/login-page.tsx, confirmed that the email step on the same page and the mobile OTP component already autofocus, added the matchingautoFocusprop, and ran the existing unit test + package typecheck before committing.