Expense - Amount input field loses focus

[vincdargento]

If you haven’t already, check out our contributing guidelines for onboarding and email contributors@expensify.com to request to join our Slack channel!

---

Version Number: v9.3.36-0
Reproducible in staging?: Yes
Reproducible in production?: No
If this was caught during regression testing, add the test name, ID and link from BrowserStack: N/A
Email or phone of affected tester (no customers): testpayment935@gmail.com
Issue reported by: Applause Internal Team
Bug source: Exploratory - Critical User Impact
Device used: Windows 11 pro /Chrome
App Component: Money Requests

Action Performed:

1. Navigate to staging.new.expensify.com
2. FAB > Create Expense

Expected Result:

The amount input field doesn't lose focus

Actual Result:

Amount input field loses focus so unable to enter amount unless focusing again

Workaround:

Unknown

Platforms:

• Android: App
• Android: mWeb Chrome
• iOS: App
• iOS: mWeb Safari
• iOS: mWeb Chrome
• Windows: Chrome
• MacOS: Chrome / Safari

Screenshots/Videos

bug.mp4

View all open jobs on GitHub

[melvin-bot]

Triggered auto assignment to @rlinoz (DeployBlockerCash), see https://stackoverflowteams.com/c/expensify/questions/9980/ for more details.

[melvin-bot]

💬 A slack conversation has been started in #expensify-open-source

[github-actions]

👋 Friendly reminder that deploy blockers are time-sensitive ⏱ issues! Check out the open `StagingDeployCash` deploy checklist to see the list of PRs included in this release, then work quickly to do one of the following:

1. Identify the pull request that introduced this issue and revert it.
2. Find someone who can quickly fix the issue.
3. Fix the issue yourself.

[OSBotify]

Investigation Summary

Classification: Frontend bug
Causing PR: #84780 - "[No QA] Revert "fix: Amount is out of view when max number of digits"" by @aimane-chnaif (High confidence)
Related Issues: #81655 (original PR that was reverted)

Recommendation: REVERT

Revert PR #84780 to restore the previous behavior. While the revert was done to prevent a different bug from reaching staging, it introduced this focus loss regression.

Labels: No changes needed. This is correctly labeled as DeployBlockerCash (frontend bug). The fix requires reverting App PR #84780.

Detailed Analysis

Evidence

PR #84780 was merged on 2026-03-10 at 18:38:49Z, which is:

• In the current staging deploy (v9.3.36-0)
• Before the bug was reported (2026-03-11 at 20:51:34Z)
• Not yet on production (bug is only reproducible on staging)

The PR reverted changes to src/components/NumberWithSymbolForm.tsx that added a useMemo hook for calculating dynamic font sizes based on amount length. The revert removed:

1. A useMemo hook that computed dynamicAmountStyle
2. The useStyleUtils hook
3. The getAmountInputFontSize utility function

Verification

The affected files are:

• src/components/NumberWithSymbolForm.tsx - Core component for amount input
• src/pages/iou/MoneyRequestAmountForm.tsx - Wraps NumberWithSymbolForm
• src/pages/iou/request/step/IOURequestStepAmount.tsx - The expense creation flow page

PR #84780 directly modifies NumberWithSymbolForm.tsx, which is the component responsible for rendering the amount input field in the expense creation flow.

Root Cause

When PR #81655 originally added the useMemo hook for dynamic styling, it likely introduced a different bug (shown in screenshot comment). The revert removed this memoization, but in doing so appears to have changed the component re-render behavior in a way that causes the input to lose focus.

The issue occurs because the style object reference changes on every render without memoization, which can trigger React to unmount/remount or blur/refocus the underlying TextInput component. This is particularly problematic in web browsers where DOM manipulation tied to style changes can interfere with focus state.

[vincdargento]

The culprit PR must be #84448 (snapshot build not generated, so can't test on this one) or #84452