Fix: Android keyboard not opening on Magic Code screen#83229
Fix: Android keyboard not opening on Magic Code screen#83229twinkle-react wants to merge 1 commit intoExpensify:mainfrom
Conversation
twinkle-react
changed the title
|
I have read the CLA Document and I hereby sign the CLA You can retrigger this bot by commenting recheck in this Pull Request. Posted by the CLA Assistant Lite bot. |
melvin-bot
bot
requested review from
blimpich
and removed request for
a team
|
@CLAassistant sign |
|
test |
![chatgpt-codex-connector[bot]](https://avatars.githubusercontent.com/in/1144995?s=60&v=4){kind=small}
There was a problem hiding this comment.
💡 Codex Review
Here are some automated review suggestions for this pull request.
Reviewed commit: 82d0c568b3
ℹ️ About Codex in GitHub
Codex has been enabled to automatically review pull requests in this repo. Reviews are triggered when you
- Open a pull request for review
- Mark a draft as ready
- Comment "@codex review".
If Codex has suggestions, it will comment; otherwise it will react with 👍.
When you sign up for Codex through ChatGPT, Codex can also answer questions or update the PR, like "@codex address that feedback".
| if (DeviceCapabilities.canUseTouchScreen()) { | ||
| focusTimeoutRef.current = setTimeout(runFocusWithRetry, 0); | ||
|
|
There was a problem hiding this comment.
This change removes the old synchronous Mobile Safari focus path and now always defers focus on touch devices via setTimeout(..., 0), but this form previously documented that delayed focus prevents the keyboard from opening on iOS Safari. In mobile web Safari, that means the magic code screen can regress to not opening the keyboard automatically again; keep the Android retry behavior, but preserve immediate focus when isMobileSafari() is true.
Useful? React with 👍 / 👎.
| return ( | ||
| <> | ||
| <MagicCodeInput | ||
| key={focusCycle} |
There was a problem hiding this comment.
Setting key={focusCycle} recreates MagicCodeInput every time this screen gains focus, which resets its internal wasSubmitted guard used to prevent repeated onFulfill calls after a full code is entered. If a user returns to the focused screen with an already-complete code value, the remounted input can auto-submit that same code again and trigger duplicate verify requests.
Useful? React with 👍 / 👎.
Inline Review Comments for
|
I have read the CLA Document and I hereby sign the CLA |
joekaufmanexpensify
left a comment
joekaufmanexpensify
left a comment
There was a problem hiding this comment.
Fine for product 👍
Codecov Report❌ Looks like you've decreased code coverage for some files. Please write tests to increase, or at least maintain, the existing level of code coverage. See our documentation here for how to interpret this table.
|
| const focusInput = () => { | ||
| inputValidateCodeRef.current?.focusLastSelected(); | ||
| }; | ||
|
|
||
| // Force a fresh input instance on each screen focus to avoid stale native focus state on reopen. | ||
| setFocusCycle((prev) => prev + 1); | ||
|
|
||
| const runFocusWithRetry = () => { | ||
| focusInput(); | ||
| focusTimeoutRef.current = setTimeout(() => { | ||
| if (inputRef.current?.isFocused?.()) { | ||
| return; | ||
| } | ||
| focusInput(); | ||
| }, CONST.ANIMATED_TRANSITION); | ||
| }; | ||
|
|
There was a problem hiding this comment.
@twinkle-react Which use cases do we need to handle with this change?
There was a problem hiding this comment.
@suneox I fixed the Magic Code keyboard issue by improving how input focus is handled when the screen gains focus. The input is re-initialized and programmatically focused, with a retry after screen transitions to handle Android focus timing issues. This ensures the keyboard opens consistently on both initial and subsequent visits, while behavior on other platforms remains unchanged.
4 participants
Explanation of Change
On Android, the keyboard was not automatically opening when navigating to the Magic Code screen after adding a new contact method.
The issue occurred because the
TextInputwas not explicitly focused when the screen gained focus on Android.This PR ensures the Magic Code input is programmatically focused when the screen mounts / gains focus so that the keyboard opens automatically.
Fixed Issues
# 80025
$ PROPOSAL: #80025 (comment)
Tests
Offline tests
QA Steps
// TODO: These must be filled out, or the issue title must include "[No QA]."
PR Author Checklist
### Fixed Issuessection aboveTestssectionOffline stepssectionQA stepssectiontoggleReportand notonIconClick)src/languages/*files and using the translation methodSTYLE.md) were followedAvatar, I verified the components usingAvatarare working as expected)StyleUtils.getBackgroundAndBorderStyle(theme.componentBG))npm run compress-svg)Avataris modified, I verified thatAvataris working as expected in all cases)Designlabel and/or tagged@Expensify/designso the design team can review the changes.ScrollViewcomponent to make it scrollable when more elements are added to the page.mainbranch was merged into this PR after a review, I tested again and verified the outcome was still expected according to theTeststeps.Screenshots/Videos
Android: Native
Android.mp4
Android: mWeb Chrome
iOS: Native
iOS: mWeb Safari
MacOS: Chrome / Safari