fix(amount-input): reliably autofocus the amount field on desktop#2277
Merged
Conversation
The amount field stopped auto-focusing when entering some flows (reported on add money): it used React's `autoFocus` prop, which only fires at the exact moment the input mounts and silently no-ops when the input mounts after a client-side navigation / step transition. Replace it with an explicit inputRef.focus() in a useEffect gated on the same desktop-only condition (shouldAutoFocus = deviceType === WEB), so focus lands regardless of mount timing. Mobile is unchanged (autofocus stays off by design). Shared component — restores focus across send / withdraw / qr-pay / add-money without altering the mobile path.
|
The latest updates on your projects. Learn more about Vercel for GitHub.
|
Contributor
|
No actionable comments were generated in the recent review. 🎉 ℹ️ Recent review info⚙️ Run configurationConfiguration used: Organization UI Review profile: CHILL Plan: Pro Run ID: 📒 Files selected for processing (1)
Walkthrough
ChangesDesktop autofocus handling
Estimated code review effort🎯 2 (Simple) | ⏱️ ~5-15 minutes 🚥 Pre-merge checks | ✅ 5✅ Passed checks (5 passed)
✏️ Tip: You can configure your own custom pre-merge checks in the settings. ✨ Finishing Touches📝 Generate docstrings
Comment |
Contributor
Code-analysis diffPainscore total: 5745.31 → 5745.45 (+0.14) 🆕 New findings (3)
✅ Resolved (3)
|
Contributor
🧪 UI test report — ✅ all greenSuites
📊 Coverage (unit)
⏱ 10 slowest test cases
|
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.
Summary
The amount input stopped auto-focusing when entering some flows (reported on add money — you have to click the field to start typing). It relied on React's
autoFocusprop, which only fires at the exact moment the<input>mounts and silently no-ops when the input mounts after a client-side navigation / step transition (e.g. the add-money amount step). Replaced it with an explicitinputRef.focus()in auseEffectgated on the same desktop-onlyshouldAutoFocus = deviceType === WEBcondition, so focus lands reliably regardless of mount timing.Risk
AmountInputis shared (send / withdraw / qr-pay / add-money / request). The change restores the same intent theautoFocusprop had (focus on desktop mount) but reliably — no new behavior.shouldAutoFocusis false there).QA
Desktop web: open Add money → amount step — the field is focused (blinking caret) without a click. Same for Send, Withdraw, QR pay amount screens. On mobile, the field is NOT auto-focused (unchanged). Full unit suite green.