Fix RHP dismissal during report navigation with key-based wrapper#88113
Closed
leshniak wants to merge 1 commit intoExpensify:mainfrom
Closed
Fix RHP dismissal during report navigation with key-based wrapper#88113leshniak wants to merge 1 commit intoExpensify:mainfrom
leshniak wants to merge 1 commit intoExpensify:mainfrom
Conversation
When navigating between expense reports using prev/next arrows, the RHP
would close because the dismissal effect detected report as undefined
during Onyx key transition and incorrectly triggered dismissModal.
Split SearchMoneyRequestReportPage into outer wrapper with
key={reportIDFromRoute} and inner content component. Each arrow click
remounts with clean state. A mount-scoped hasEverHadReportRef ensures
dismissal only fires after report has loaded then disappeared (deletion),
not during initial hydration gap. Hydration guard in shouldShowAccessErrorPage
suppresses the not-found page while Onyx resolves.
Co-Authored-By: Claude Opus 4.6 <noreply@anthropic.com>
|
@abdulrahuman5196 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] |
|
@aimane-chnaif @Julesssss One of you needs to 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] |
Codecov Report✅ Changes either increased or maintained existing code coverage, great job!
|
50 tasks
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment
Add this suggestion to a batch that can be applied as a single commit.This suggestion is invalid because no changes were made to the code.Suggestions cannot be applied while the pull request is closed.Suggestions cannot be applied while viewing a subset of changes.Only one suggestion per line can be applied in a batch.Add this suggestion to a batch that can be applied as a single commit.Applying suggestions on deleted lines is not supported.You must change the existing code in this line in order to create a valid suggestion.Outdated suggestions cannot be applied.This suggestion has been applied or marked resolved.Suggestions cannot be applied from pending reviews.Suggestions cannot be applied on multi-line comments.Suggestions cannot be applied while the pull request is queued to merge.Suggestion cannot be applied right now. Please check back later.
When navigating between expense reports via prev/next arrows, the RHP closes unexpectedly because
setParamsupdatesreportIDFromRouteimmediately but Onyx briefly returnsundefinedfor the new report. The dismissal effect misinterprets this transient state as a report deletion and callsdismissModal.Explanation of Change
Split
SearchMoneyRequestReportPageinto an outer wrapper that passeskey={reportIDFromRoute}and an innerSearchMoneyRequestReportPageContent. Each arrow click remounts the inner component with a clean slate — all hooks and refs reset naturally without manual tracking.The dismissal effect uses a mount-scoped
hasEverHadReportRef— it startsfalseon each remount, so the transientundefinedduring Onyx hydration cannot trigger dismissal. Once the report loads, the ref becomestrue. If the report is later deleted (becomesundefined), we dismiss — preserving the existing behavior. TheisMoneyRequestReportcheck from the original code was dropped since this page only renders money request reports.Also adds a hydration guard in
shouldShowAccessErrorPage: whenreportIDFromRouteis set butreportIDhasn't resolved from Onyx yet and report actions haven't loaded, the error page is suppressed — showing the skeleton loader instead of "Hmm... it's not there". The guard is bounded byhasLoadedReportActionsForAccessErrorso genuinely non-existent reports still show the error once loading completes.This also removes both
usePreviouscalls from the component, making it React Compiler compliant.Fixed Issues
$ #87784
PROPOSAL:
Tests
Offline tests
QA Steps
Same as Tests above.