fix: Show discard changes modal on browser/device back in money-request flows - #95076
Conversation
…-changes-modal-doesnt-show-up-when-going-back-with-the-browser-back-button
…-changes-modal-doesnt-show-up-when-going-back-with-the-browser-back-button
…-changes-modal-doesnt-show-up-when-going-back-with-the-browser-back-button
…RHP flows consistently
…baseline is missing
|
@jayeshmangwani 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] |
There was a problem hiding this comment.
💡 Codex Review
Here are some automated review suggestions for this pull request.
Reviewed commit: 4120f352ca
ℹ️ 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".
…-changes-modal-doesnt-show-up-when-going-back-with-the-browser-back-button # Conflicts: # src/libs/MoneyRequestUtils.ts
Codecov Report✅ Changes either increased or maintained existing code coverage, great job!
|
|
@codex review |
|
Codex Review: Didn't find any major issues. Bravo. Reviewed commit: ℹ️ About Codex in GitHubCodex has been enabled to automatically review pull requests in this repo. Reviews are triggered when you
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". |
…-changes-modal-doesnt-show-up-when-going-back-with-the-browser-back-button
|
@codex review |
There was a problem hiding this comment.
💡 Codex Review
Here are some automated review suggestions for this pull request.
Reviewed commit: 5a0e627ef3
ℹ️ 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".
|
@codex review |
There was a problem hiding this comment.
💡 Codex Review
Here are some automated review suggestions for this pull request.
Reviewed commit: f91d155095
ℹ️ 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".
MonilBhavsar
left a comment
There was a problem hiding this comment.
Looking good otherwise
…-changes-modal-doesnt-show-up-when-going-back-with-the-browser-back-button
|
Thanks! |
|
🚧 MonilBhavsar has triggered a test Expensify/App build. You can view the workflow run here. |
|
✋ This PR was not deployed to staging yet because QA is ongoing. It will be automatically deployed to staging after the next production release. |
|
🧪🧪 Use the links below to test this adhoc build on Android, iOS, and Web. Happy testing! 🧪🧪
|
|
We have a crash when we try to open Create expense or Track distance flow @TaduJR 2026-07-14.13.23.56.mov |
|
🚀 Deployed to staging by https://github.com/MonilBhavsar in version: 9.4.34-0 🚀
|
|
🤖 I reviewed the changes in this PR against Expensify's help site files under No help site changes are required, and no draft docs PR was created. This PR is a UX/navigation bug fix: it makes the existing Discard changes confirmation modal appear when a user leaves a money-request step that has unsaved input by pressing the browser back button or the Android device back button (plus the related dirty-check and Why no docs update is needed
If you feel a specific article should call out this behavior, let me know which one and I'll draft the update. |
Checking |
|
I think this is the PR that is causing it #94899. Got it from slack thread https://expensify.slack.com/archives/C01GTK53T8Q/p1784033901045039?thread_ts=1784033385.814129&cid=C01GTK53T8Q |
|
🚀 Deployed to production by https://github.com/roryabraham in version: 9.4.34-14 🚀
|
|
🚀 Deployed to production by https://github.com/roryabraham in version: 9.4.34-14 🚀
Bundle Size Analysis (Sentry): |
Explanation of Change
This PR makes the "Discard changes" confirmation appear when a user leaves a money-request step that has unsaved input by pressing the browser back button or the Android device back button. Before this change those two back paths left the step and dropped the input with no prompt.
How it works
@react-navigation/core(useOnPreventRemove) makesshouldPreventRemovealso recurse into a kept route whose nested state changed, instead of only checking routes removed by key. A browser back dispatches aRESETthat keeps the outer RHP route but replaces its nested tab state, so without this patch the event never reached the focused tab screen and it could not prompt.useDiscardChangesConfirmation/index.ts). It intercepts thatRESETthroughbeforeRemove, shows the discard modal (configured not to add a browser history entry of its own), and restores the URL withhistory.go(1), because the browser entry has already moved by the timebeforeRemovefires. It tracks this restore round-trip so the follow-up popstate event is not mistaken for a fresh back press.index.native.ts). It mirrors the web behavior withusePreventRemove, plus aBackHandlerlistener for the tab-switch hardware back, which is an index-only tab change that never firesbeforeRemove.backBehavior: 'none'onOnyxTabNavigator. Previously the navigator used'initialRoute', so a back press returned to the initial tab before leaving.'none'keeps the tab history at a single entry, so a back press leaves the whole flow directly, and it behaves the same on web and native.TabSwitchGuardContextandOnyxTabNavigator.handleTabPress). The odometer tab holds its reading in local state that a tab switch would drop, so switching away from it is intercepted and the same discard modal is shown. Other tabs share their draft or reset by design, so they have nothing to lose and stay unguarded.MoneyRequestUtils).getAmountHasUnsavedChanges,getStringFieldHasUnsavedChanges, andgetWaypointsHasUnsavedChangesdecide whether a step is dirty by comparing the current value against the last committed value, which is empty when creating and the saved value when editing. That keeps the check correct in both the create and edit flows.Deploy blockers fixed
backBehaviorto'none'makes both leave the flow.Fixed Issues
$ #94844
$ #94845
$ #94910
$ #94861
$ #84246
PROPOSAL:
Tests
[Due for payment 2026-07-23] Expense - Discard changes modal does not appear after proceeding to next page and exiting it #94844 (no modal after Next, then back)
[Due for payment 2026-07-23] Expense - Discard changes modal does not appear when amount is zero #94845 (no modal when the amount is zero)
[Due for payment 2026-07-23] Expense - "Discard Changes" modal not displayed after editing waypoints in distance expense. #94910 (no modal after editing waypoints)
[Due for payment 2026-07-23] Expense - Different behavior of "Discard Changes" when using app´s or device´s back button. #94861 (device and app back behave the same after Discard, Android)
Offline tests
Same as tests
QA Steps
// TODO: These must be filled out, or the issue title must include "[No QA]."
Same as tests
PR Author Checklist
### Fixed Issuessection aboveTestssectionOffline stepssectionQA stepssectioncanBeMissingparam foruseOnyxtoggleReportand 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-Native.mp4
Android: mWeb Chrome
iOS: Native
iOS: mWeb Safari
iOS-Safari.mp4
MacOS: Chrome / Safari
Mac-Chrome.mp4