Replace useDelayedAutoFocus with useAutoFocusInput in sub-step forms by MelvinBot · Pull Request #105572 · Expensify/App

MelvinBot · 2026-11-01T15:32:45Z

Explanation of Change

The app had two ways to delay input autofocus. SingleFieldStep and RegistrationNumberStep used useDelayedAutoFocus, which focused the input after a fixed 300 ms timer. Every other screen uses useAutoFocusInput, which waits for the screen transition to end (transitionEnd and TransitionTracker.runAfterTransitions).

On iOS, the fixed timer could focus the input while the push transition to the next step was still running. The input then lost focus, FormProvider treated that blur as a user action, and the empty field showed "This field is required" before the user typed anything. For example, this happened on the Company name step after Onfido.

This PR:

Uses useAutoFocusInput in SingleFieldStep and RegistrationNumberStep when shouldDelayAutoFocus is set. The input gets inputCallbackRef only in that case, matching NonUSD/SignerInfo/EnterEmail.tsx.
Deletes useDelayedAutoFocus, which has no other callers.

Every step that passes shouldDelayAutoFocus gets the fix, not just the Company name step. Landscape mode still skips autofocus, because useAutoFocusInput already checks isInLandscapeMode.

AI Tests

✅ npm run typecheck
✅ npm run lint-changed
✅ npm run react-compiler-compliance-check check on both changed components
✅ npm test -- --findRelatedTests on the changed files: 100 suites and 1,211 tests passed, including USDVerifiedBankAccountFlowPageTest and AddPersonalBankAccountPageTest
⚠️ Not run: oxfmt --check, the full npm run lint and npm test suites, and the Storybook smoke test. The edits only remove lines and swap one import in the same sort position.
⚠️ A web check of the autofocus could not run because the test browser loaded a blank page. The bug is iOS-only, so the human co-author still needs to verify on iOS.

Fixed Issues

$ #104049
PROPOSAL: #104049 (comment)

Tests

Go to Workspaces > your workspace > Workflows
Under Payments, tap Add bank account
Tap Log into your bank, choose Regions Bank, then Saving account 1111
Complete the Personal info steps (legal name, date of birth, last 4 of SSN, address)
On "Let's double check that everything looks right.", tap Confirm
Complete Onfido flow (if required)
On "What's the name of your company?", watch the Legal company name field without touching the screen
Verify that "This field is required" is not shown and the field is focused once the screen finishes sliding in
Leave the field empty and tap Next
Verify that "This field is required" is shown
Enter a company name and tap Next
On the Tax ID step, verify that the field is focused once the screen finishes sliding in and no error is shown
Tap the back button
Verify that the Legal company name field is focused and no error is shown

Verify that no errors appear in the JS console

Offline tests

Follow Tests steps 1–11 to reach the Tax ID step
Turn off the network connection
Tap the back button
Verify that the Legal company name field is focused once the screen finishes sliding in and "This field is required" is not shown

QA Steps

Go to Workspaces > your workspace > Workflows
Under Payments, tap Add bank account
Tap Log into your bank, choose Regions Bank, then Saving account 1111
Complete the Personal info steps (legal name, date of birth, last 4 of SSN, address)
On "Let's double check that everything looks right.", tap Confirm
Complete Onfido flow (if required)
On "What's the name of your company?", watch the Legal company name field without touching the screen
Verify that "This field is required" is not shown and the field is focused once the screen finishes sliding in

Verify that no errors appear in the JS console

PR Author Checklist

Screenshots/Videos

Android: Native

Android: mWeb Chrome

iOS: Native

iOS: mWeb Safari

MacOS: Chrome / Safari

The fixed 300 ms focus timer could fire before the screen push transition finished. On iOS the input then lost focus, which marked the empty field as touched and showed a 'This field is required' error. useAutoFocusInput waits for the transition to end before focusing. Co-authored-by: mkhutornyi <mkhutornyi@users.noreply.github.com>

MelvinBot · 2026-11-01T15:32:59Z

I created this PR from an upstream branch because I can't push to a fork for you.

If you want to take ownership of this branch and push updates, run:

git remote add upstream https://github.com/Expensify/App.git
git fetch upstream claude-replaceDelayedAutoFocusWithAutoFocusInput
git checkout -b claude-replaceDelayedAutoFocusWithAutoFocusInput upstream/claude-replaceDelayedAutoFocusWithAutoFocusInput
git push -u origin claude-replaceDelayedAutoFocusWithAutoFocusInput

Then you can close this PR and open a new one from your fork.

codecov · 2026-11-01T15:36:25Z

Codecov Report

✅ Changes either increased or maintained existing code coverage, great job!

Files with missing lines	Coverage Δ
src/components/SubStepForms/SingleFieldStep.tsx	`100.00% <100.00%> (ø)`
...components/SubStepForms/RegistrationNumberStep.tsx	`0.00% <0.00%> (ø)`
... and 6 files with indirect coverage changes

mkhutornyi · 2026-11-01T15:41:38Z

@codex review

mkhutornyi · 2026-11-01T15:41:48Z

@MelvinBot review

chatgpt-codex-connector · 2026-11-01T15:41:53Z

Codex Review Summary

This comment shows the latest Codex review activity on this pull request.

Review	Status	Commit	Review trigger
📝 Code Review	✅ Completed 2026-11-01T16:23:59.067941Z	`df24c71`	Draft marked ready

ℹ️ About Codex in GitHub

Your team has set up Codex to 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" or "@codex security review".

Codex reacts with 👀 while any review is running, comments if it has suggestions, and reacts with 👍 once all reviews finish with no findings.

MelvinBot · 2026-11-01T15:42:29Z

🤖 Web test steps verification results: ❌ fail

I couldn't test the changed screens on Web, so this result doesn't show whether the PR works. Every path to SingleFieldStep and RegistrationNumberStep first shows a "Validate your account" screen. That screen needs a code sent to the test account's email, and the tester can't read that inbox. The PR's Tests section has only "Verify that no errors appear in the JS console", so I built steps 1–4 from the linked issue. The tester tried six paths: workspace bank account in GBP and in USD (manual and Plaid), Wallet → Add bank account, and Wallet → Enable wallet. All six stopped at that screen. You can't open the Update personal bank account page without an existing bank account.

Step	Status
Open a SingleFieldStep screen that uses shouldDelayAutoFocus. The input focuses on its own after the transition. Screen not reached. All six paths stopped at "Validate your account". A guessed code was rejected with "Incorrect or invalid magic code".	❌
Before typing, no "This field is required" error shows under the empty input. Not reached. Blocked by the same screen.	❌
Go to the next sub-step (RegistrationNumberStep if possible). Its input focuses on its own with no early error. Not reached. Blocked by the same screen.	❌
Submit an empty field. "This field is required" appears. Not reached. Blocked by the same screen.	❌
Verify that no errors appear in the JS console. Not checkable. The Web test tool can't read the browser console.	⚠️

To test this on Web, someone needs a test account that's already validated. Testing on iOS, where the bug happens, is still needed.

view run · view recording

chatgpt-codex-connector · 2026-11-01T15:45:02Z

Codex Review: Didn't find any major issues. Already looking forward to the next diff.

Reviewed commit: df24c71089

ℹ️ 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".

MelvinBot · 2026-11-01T15:48:48Z

I found no high-severity regressions. Every sub-step still gets autofocus. Each Next, Back, or Edit is a real screen push, and useAutoFocusInput sets a 1-second fallback timer even if transitionEnd never fires (useAutoFocusInput.ts:105-131).

The new hook changes behavior in four small ways:

#	Change	Severity	Where
1	Web, Back: focus can stay on the restored Next button instead of the input. Focus-return claims a higher priority than autofocus for 2 seconds. The old hook always called `focus()` after 300 ms. This only happens if you clicked Next with the mouse. If you pressed Enter, the input gets focus. Arguably this is the intended accessibility behavior.	Low	useAutoFocusInput.ts:83-88, ScreenFocusArbiter.ts:7-13
2	Slower focus: focus can take up to about 1 second instead of 300 ms. This happens when the input mounts after the transition has ended. One example is the first sub-step, which mounts after a loading redirect.	Low	useSubPage/index.tsx:23-31
3	Screen reader on: these sub-steps no longer autofocus. Every other `useAutoFocusInput` screen already works this way.	Low	useAutoFocusInput.ts:62
4	Side panel: closing the side panel moves focus back to the sub-step input.	Very low	useAutoFocusInput.ts:133-151

Not verified in the app. These findings come from reading the code. On Web, every path to these screens is blocked by the "Validate your account" code screen (see my earlier comment). The bank account flow tests (USDVerifiedBankAccountFlowPageTest.tsx) don't check focus.

Worth checking on iOS: the Company name step mounts after the loading redirect. Its focus may come from the 1-second fallback rather than transitionEnd. Confirm that the iOS Onfido case from the issue is actually fixed.

Ruled out

New sub-step never gets focus: ruled out. Sub-steps are separate routes pushed by linkTo (useSubPage/index.tsx:92-104), and the 1-second fallback covers a missed transitionEnd.
Edit from the confirmation page, and flows that replace the route (EnableGlobalReimbursements registration number): both mount a new screen, so the input gets focus.
Focus when returning to the screen: still driven by useFocusEffect, so it runs again each time, like the old hook.
Landscape mode: both hooks skip autofocus.
Callback ref through FormProvider: supported (FormProvider.tsx:466-472). NonUSD/SignerInfo/EnterEmail.tsx already uses the same conditional ref.
Steps that don't set shouldDelayAutoFocus: the ref is undefined, so the hook never focuses, and native autoFocus still works. The hook still runs, which adds an Onyx subscription and a timer, but this has no effect on behavior.
All callers checked: USD and NonUSD Business info, Requestor, and Beneficial owner steps; Signer info; EnablePayments; AddPersonalBankAccount; UpdatePersonalBankAccount; EnableGlobalReimbursements. All are route-based useSubPage screens. None renders outside a navigator.

view run

mkhutornyi · 2026-11-01T16:17:28Z

@MelvinBot add QA Steps below and mark this PR ready for review

Go to Workspaces > your workspace > Workflows
Under Payments, tap Add bank account
Tap Log into your bank, choose Regions Bank, then Saving account 1111
Complete the Personal info steps (legal name, date of birth, last 4 of SSN, address)
On "Let's double check that everything looks right.", tap Confirm
Complete Onfido flow (if required)
On "What's the name of your company?", watch the Legal company name field without touching the screen
Verify that "This field is required" is not shown and the field is focused once the screen finishes sliding in

MelvinBot · 2026-11-01T16:20:19Z

I added your 8 QA steps to the QA Steps section and marked this PR ready for review.

The Tests section still has its TODO placeholder. The PR Author Checklist and Screenshots/Videos sections are also still empty. You may need to fill those in before the PR Author Checklist check passes.

view run

melvin-bot · 2026-11-01T16:20:22Z

@mkhutornyi Please copy/paste the Reviewer Checklist from here into a new comment on this PR and complete it. If you have the K2 extension, you can simply click: [this button]

mkhutornyi · 2026-11-01T16:22:03Z

Reviewer Checklist

Screenshots/Videos

Android: HybridApp

android.mp4

Android: mWeb Chrome

iOS: HybridApp

ios.MP4

ios.mp4

iOS: mWeb Safari

MacOS: Chrome / Safari

web1.mov

web2.mov

melvin-bot · 2026-11-01T16:59:04Z

We did not find an internal engineer to review this PR, trying to assign a random engineer to #104049 as well as to this PR... Please reach out for help on Slack if no one gets assigned!

NicolasBonet

@mkhutornyi please fill all the PR description gaps like QA, offline steps, checklist

mkhutornyi · 2026-11-02T14:07:17Z

@mkhutornyi please fill all the PR description gaps like QA, offline steps, checklist

We can skip Melvin's author checklist as per #104228

https://expensify.slack.com/archives/C03TQ48KC/p1792156285927939?thread_ts=1792155976.784659&cid=C03TQ48KC

mkhutornyi · 2026-11-02T14:08:09Z

@MelvinBot add missing Tests, Offline steps

MelvinBot · 2026-11-02T14:11:55Z

I added the Tests and Offline tests sections to the PR description.

Tests: The same flow as the QA steps, plus three checks. Tapping Next on an empty field still shows "This field is required". The Tax ID step autofocuses with no early error. Going back autofocuses the Legal company name field.
Offline tests: Go back from the Tax ID step while offline. The Legal company name field should autofocus with no "This field is required" error.

I didn't run these steps. Please check them on iOS, where the bug happens.

view run

OSBotify · 2026-11-02T15:53:29Z

✋ This PR was not deployed to staging yet because QA is ongoing. It will be automatically deployed to staging after the next production release.

github-actions · 2026-11-02T16:18:06Z

🚧 NicolasBonet has triggered a test Expensify/App build. You can view the workflow run here.

github-actions · 2026-11-02T16:23:09Z

🧪🧪 Use the links below to test this adhoc build on Android, iOS, and Web. Happy testing! 🧪🧪
Built from App PR #105572 with the pinned Mobile-Expensify submodule.

Android 🤖	iOS 🍎
https://ad-hoc-expensify-cash.s3.us-east-1.amazonaws.com/rock-artifacts/ad-hoc/rock-android-Adhoc-1dad0add-dae7e7c-d1604fb031b5ea5a1508ce191c7cbf39eec0f0d2/index.html	https://ad-hoc-expensify-cash.s3.us-east-1.amazonaws.com/rock-artifacts/ad-hoc/rock-ios-device-AdHoc-1dad0add-dae7e7c-89f39c3c2eeeca8a728143502f6c5db74ad733b6/index.html

Web 🕸️
https://105572.pr-testing.expensify.com

👀 View the workflow run that generated this build 👀

OSBotify · 2026-11-02T18:54:07Z

🚀 Deployed to staging by https://github.com/NicolasBonet in version: 9.5.28-4 🚀

platform	result
🕸 web 🕸	success ✅
🤖 android 🤖	success ✅
🍎 iOS 🍎	success ✅

MelvinBot · 2026-11-02T19:04:04Z

No help site update needed. This PR fixes an iOS autofocus timing bug that showed "This field is required" too early on bank account sub-steps; it changes no feature, label, or workflow that a help article describes.

view run

OSBotify · 2026-11-03T17:59:13Z

🚀 Deployed to staging by https://github.com/NicolasBonet in version: 9.5.30-0 🚀

platform	result
🕸 web 🕸	success ✅
🤖 android 🤖	success ✅
🍎 iOS 🍎	success ✅

OSBotify · 2026-11-03T19:05:05Z

🚀 Deployed to production by https://github.com/blimpich in version: 9.5.30-0 🚀

platform	result
🕸 web 🕸	success ✅
🤖 android 🤖	success ✅
🍎 iOS 🍎	success ✅

Bundle Size Analysis (Sentry):

Android
iOS

MelvinBot assigned mkhutornyi Nov 1, 2026

MelvinBot requested a review from a team November 1, 2026 15:32

melvin-bot Bot added Melvin-Test-Android Melvin-Test-Web Triggers Melvin to run the testing steps of the PR on web labels Nov 1, 2026

MelvinBot mentioned this pull request Nov 1, 2026

[Due for payment 2026-11-10] [$175] Bank account-This field is required error in the company name field after completing Onfido #104049

Open

1 of 7 tasks

MelvinBot marked this pull request as ready for review November 1, 2026 16:20

MelvinBot requested a review from a team as a code owner November 1, 2026 16:20

melvin-bot Bot requested review from mkhutornyi and removed request for a team November 1, 2026 16:20

melvin-bot Bot requested review from trjExpensify and removed request for a team November 1, 2026 16:20

mkhutornyi approved these changes Nov 1, 2026

View reviewed changes

melvin-bot Bot requested a review from NicolasBonet November 1, 2026 16:59

NicolasBonet requested changes Nov 2, 2026

View reviewed changes

NicolasBonet approved these changes Nov 2, 2026

View reviewed changes

NicolasBonet merged commit 1dad0ad into main Nov 2, 2026
58 of 61 checks passed

NicolasBonet deleted the claude-replaceDelayedAutoFocusWithAutoFocusInput branch November 2, 2026 15:48

OSBotify mentioned this pull request Nov 2, 2026

Deploy Checklist: New Expensify 2026-11-02 #105665

Closed

75 tasks done

Conversation

MelvinBot commented Nov 1, 2026 • edited Loading Uh oh! There was an error while loading. Please reload this page.

Uh oh!

Explanation of Change

Fixed Issues

Tests

Offline tests

QA Steps

PR Author Checklist

Screenshots/Videos

Uh oh!

MelvinBot commented Nov 1, 2026

Uh oh!

codecov Bot commented Nov 1, 2026 • edited by github-actions Bot Loading Uh oh! There was an error while loading. Please reload this page.

Uh oh!

Codecov Report

Uh oh!

mkhutornyi commented Nov 1, 2026

Uh oh!

mkhutornyi commented Nov 1, 2026

Uh oh!

chatgpt-codex-connector Bot commented Nov 1, 2026 • edited Loading Uh oh! There was an error while loading. Please reload this page.

Uh oh!

Codex Review Summary

Uh oh!

MelvinBot commented Nov 1, 2026 • edited Loading Uh oh! There was an error while loading. Please reload this page.

Uh oh!

Uh oh!

chatgpt-codex-connector Bot commented Nov 1, 2026

Uh oh!

MelvinBot commented Nov 1, 2026

Uh oh!

mkhutornyi commented Nov 1, 2026

Uh oh!

MelvinBot commented Nov 1, 2026

Uh oh!

melvin-bot Bot commented Nov 1, 2026

Uh oh!

mkhutornyi commented Nov 1, 2026 • edited Loading Uh oh! There was an error while loading. Please reload this page.

Uh oh!

Reviewer Checklist

Screenshots/Videos

Uh oh!

melvin-bot Bot commented Nov 1, 2026

Uh oh!

NicolasBonet left a comment

Choose a reason for hiding this comment

Uh oh!

mkhutornyi commented Nov 2, 2026

Uh oh!

mkhutornyi commented Nov 2, 2026

Uh oh!

MelvinBot commented Nov 2, 2026

Uh oh!

Uh oh!

OSBotify commented Nov 2, 2026

Uh oh!

github-actions Bot commented Nov 2, 2026

Uh oh!

github-actions Bot commented Nov 2, 2026

Uh oh!

OSBotify commented Nov 2, 2026

Uh oh!

MelvinBot commented Nov 2, 2026

Uh oh!

OSBotify commented Nov 3, 2026

Uh oh!

OSBotify commented Nov 3, 2026

Uh oh!

Reviewers

Uh oh!

Assignees

Labels

Projects

Milestone

Development

Uh oh!

4 participants

MelvinBot commented Nov 1, 2026 •

edited

Loading

codecov Bot commented Nov 1, 2026 •

edited by github-actions Bot

Loading

chatgpt-codex-connector Bot commented Nov 1, 2026 •

edited

Loading

MelvinBot commented Nov 1, 2026 •

edited

Loading

mkhutornyi commented Nov 1, 2026 •

edited

Loading