Fix Spend tab flash when backing out of manual expense from Workspaces tab#94515
Conversation
…se back Co-authored-by: thelullabyy <thelullabyy@users.noreply.github.com>
|
🤖 I created this PR from an upstream branch since I don't have push access to your fork. To take ownership of this branch and be able to push updates, run: Then you can close this PR and open a new one from your fork if you prefer. |
|
@MelvinBot Please replace all Finally, open PR for review |
|
@thelullabyy 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] |
|
🤖 Done,
|
|
@MelvinBot The Test and QA part should be |
Reviewer Checklist
Screenshots/VideosAndroid: HybridAppAndroid: mWeb ChromeiOS: HybridAppiOS: mWeb SafariMacOS: Chrome / SafariScreen.Recording.2026-06-25.at.00.54.51.mov |
|
🤖 Updated the Tests and QA Steps sections to add the |
|
@MelvinBot You are using the wrong PR description template. Please use this one https://raw.githubusercontent.com/Expensify/App/main/.github/PULL_REQUEST_TEMPLATE.md |
|
🤖 Done, |
|
✋ This PR was not deployed to staging yet because QA is ongoing. It will be automatically deployed to staging after the next production release. |
|
🚧 puneetlath has triggered a test Expensify/App build. You can view the workflow run here. |
|
🧪🧪 Use the links below to test this adhoc build on Android, iOS, and Web. Happy testing! 🧪🧪
|
|
🚀 Deployed to staging by https://github.com/puneetlath in version: 9.4.20-0 🚀
|
|
🤖 I reviewed the changes in this PR and no help site changes are required. Why: This is a purely internal navigation fix. It adds a single There is no change to any user-facing feature, workflow, label, button, tab name, or setting — the steps a user takes to create a manual expense are unchanged; only an internal animation glitch is removed. The help articles under No draft PR was created since there are no docs updates to make. @thelullabyy, if you believe a specific help article should still be updated, let me know which behavior it should describe and I'll draft the changes. |
|
🚀 Deployed to production by https://github.com/blimpich in version: 9.4.20-1 🚀
Bundle Size Analysis (Sentry): |
Explanation of Change
On the Workspaces bottom tab, opening FAB → Create expense → Manual and then pressing back briefly flashed the Spend tab before landing back on Workspaces.
When the embedded
IOURequestStepConfirmationmounts from global-create, it pre-inserts the Search/Spend fullscreen route under the RHP so the right tab is revealed after submit. On back-press,navigateBackcalledNavigation.closeRHPFlow()which pops the RHP first. By the time the confirmation's unmount cleanup ranremovePreInsertedFullscreenIfNeeded(), the RHP was already gone, so it took the "already-dismissed" branch and restored the original tab on the next frame viarequestAnimationFrame. For that one frame the pre-inserted Spend tab was the visible top route → the flash.This change restores the original tab while the RHP is still on top by calling
Navigation.removePreInsertedFullscreenIfNeeded()beforecloseRHPFlow()innavigateBack. That routes the dismiss through the cleanREMOVE_FULLSCREEN_UNDER_RHPbranch, which swaps the tab back under the RHP before it pops — so Workspaces (not Spend) is revealed and there is no flash. The call is a guarded no-op when nothing was pre-inserted, and the existing unmount-cleanup check (getIsFullscreenPreInsertedUnderRHP()) prevents any double handling.Code reference
src/pages/iou/request/IOURequestStartPage.tsxnavigateBackNavigation.tsREMOVE_FULLSCREEN_UNDER_RHPNavigation.tsFixed Issues
$ #94271
PROPOSAL: #94271 (comment)
Tests
Offline tests
Same as Tests.
QA Steps
PR Author Checklist
### Fixed Issuessection aboveTestssectionOffline stepssectionQA stepssectiontoggleReportand notonIconClick)Avatar, 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.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: mWeb Chrome
iOS: Native
iOS: mWeb Safari
MacOS: Chrome / Safari
🤖 Drafted by MelvinBot. AI tests run locally before opening this PR:
prettier(clean),lint-changed(pass),typecheck-tsgo(pass),tests/ui/IOURequestStartPageTest.tsx(pass),tests/ui/components/IOURequestStepConfirmationPageTest.tsx(13 pass). The React Compiler compliance check could not run locally due to an environment ref-resolution issue (CI=truewith an emptyGITHUB_BASE_REF); the change adds only an imperative statement to an existing event handler, so it introduces no new memoizable construct — CI runs the authoritative check.