[Due for payment 2025-08-11] [$250] mWeb/Chrome - Search - App stuck when navigating to search and tap enter

[lanitochka17]

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: 9.1.80-0
Reproducible in staging?: Y
Reproducible in production?: Y
If this was caught during regression testing, add the test name, ID and link from TestRail: N/A
Issue reported by: Applause - Internal Team

Action Performed:

1. Navigate to staging.new.expensify.com
2. Tap the search icon in the top right corner
3. Focus on the search field (if not already focused)
4. Tap Enter

Expected Result:

The app doesn't get stuck and works properly

Actual Result:

The app gets stuck on the search page and appears split until it is refreshed

Workaround:

Unknown

Platforms:

Select the officially supported platforms where the issue was reproduced:

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

Platforms Tested:

On which of our officially supported platforms was this issue tested:

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

Screenshots/Videos

Add any screenshot/video evidence

Bug6884695_1752259946599.1752259864422.mp4

View all open jobs on GitHub

Upwork Automation - Do Not Edit

• Upwork Job URL: https://www.upwork.com/jobs/~021947799858775511316
• Upwork Job ID: 1947799858775511316
• Last Price Increase: 2025-07-22
• Automatic offers:
• huult | Contributor | 108218664

Issue Owner

Current Issue Owner: @muttmuure

[melvin-bot]

Triggered auto assignment to @muttmuure (Bug), see https://stackoverflow.com/c/expensify/questions/14418 for more details. Please add this bug to a GH project, as outlined in the SO.

[Eskalifer1]

Proposal

Please re-state the problem that we are trying to solve in this issue.

mWeb/Chrome - Search - App stuck when navigating to search and tap enter

What is the root cause of that problem?

The problem is in this part of the code:
We are trying to close the SearchRouter and go to another page at the same time:

App/src/components/Search/SearchRouter/SearchRouter.tsx

Lines 262 to 265 in ece1578

	backHistory(() => {
	onRouterClose();
	Navigation.navigate(ROUTES.SEARCH_ROOT.getRoute({query: updatedQuery}));
	});

Since we are now using ReanimatedModal for SearchRouter, it has an animation when opening and closing, and we try to call onRouterClose beforehand, at which time the animation is happening and at the same time we are trying to navigate to another page, which is why the application hangs

What changes do you think we should make in order to solve the problem?

We need to switch only after we have closed the SearchRouter:

backHistory(() => {
                onRouterClose();
                InteractionManager.runAfterInteractions(() => {
                    Navigation.navigate(ROUTES.SEARCH_ROOT.getRoute({query: updatedQuery}));
                });
            });

What specific scenarios should we cover in automated tests to prevent reintroducing this issue in the future?

None

What alternative solutions did you explore? (Optional)

Reminder: Please use plain English, be brief and avoid jargon. Feel free to use images, charts or pseudo-code if necessary. Do not post large multi-line diffs or write walls of text. Do not create PRs unless you have been hired for this job.

[dmkt9]

Proposal

Please re-state the problem that we are trying to solve in this issue.

Search - App stuck when navigating to search and tap enter

What is the root cause of that problem?

Because the app was navigated at this point before the SearchRouterModal had fully closed, the modal remained visible on the screen, causing the app to get stuck.

App/src/components/Search/SearchRouter/SearchRouter.tsx

Lines 262 to 265 in 5c9a614

	backHistory(() => {
	onRouterClose();
	Navigation.navigate(ROUTES.SEARCH_ROOT.getRoute({query: updatedQuery}));
	});

What changes do you think we should make in order to solve the problem?

Since a modal normally closes with an exit animation, waiting for it to fully close can cause undesirable delay. To preserve the immediate route transition effect, we should return null as soon as navigation is triggered:

1. Add a state in SearchRouterModal to remove the modal just before navigating.
   

   App/src/components/Search/SearchRouter/SearchRouterModal.tsx

   Line 17 in 5c9a614

   const viewportOffsetTop = useViewportOffsetTop();

+ const [willBeNavigated, setWillBeNavigated] = useState(false);

App/src/components/Search/SearchRouter/SearchRouterModal.tsx

Line 24 in 5c9a614

return (

+ if (willBeNavigated) {
+     return null;
+ }

return (

App/src/components/Search/SearchRouter/SearchRouterModal.tsx

Lines 47 to 51 in 5c9a614

	<SearchRouter
	onRouterClose={closeSearchRouter}
	shouldHideInputCaret={shouldHideInputCaret}
	isSearchRouterDisplayed={isSearchRouterDisplayed}
	/>

<SearchRouter
    onRouterClose={closeSearchRouter}
    shouldHideInputCaret={shouldHideInputCaret}
    isSearchRouterDisplayed={isSearchRouterDisplayed}
+    prepareNavigating={() => {
+        setWillBeNavigated(true);
+        InteractionManager.runAfterInteractions(() => {
+            // reset value
+            setWillBeNavigated(false);
+        });
+    }}
/>

2. Use a new prepareNavigating prop for SearchRouter, placed right before any Navigation.navigate calls.
   

   App/src/components/Search/SearchRouter/SearchRouter.tsx

   Line 79 in 5c9a614

   isSearchRouterDisplayed?: boolean;

+ prepareNavigating: () => void;

App/src/components/Search/SearchRouter/SearchRouter.tsx

Line 82 in 5c9a614

function SearchRouter({onRouterClose, shouldHideInputCaret, isSearchRouterDisplayed}: SearchRouterProps, ref: React.Ref<View>) {

function SearchRouter({onRouterClose, shouldHideInputCaret, isSearchRouterDisplayed, prepareNavigating}: SearchRouterProps, ref: React.Ref<View>) {

App/src/components/Search/SearchRouter/SearchRouter.tsx

Line 264 in 5c9a614

Navigation.navigate(ROUTES.SEARCH_ROOT.getRoute({query: updatedQuery}));

+ prepareNavigating();
Navigation.navigate(ROUTES.SEARCH_ROOT.getRoute({query: updatedQuery}));

App/src/components/Search/SearchRouter/SearchRouter.tsx

Lines 384 to 390 in 5c9a614

	backHistory(() => {
	if (item?.reportID) {
	Navigation.navigate(ROUTES.REPORT_WITH_ID.getRoute(item.reportID));
	} else if ('login' in item) {
	navigateToAndOpenReport(item.login ? [item.login] : [], false);
	}
	});

+ prepareNavigating();
if (item?.reportID) {
    ...

What specific scenarios should we cover in automated tests to prevent reintroducing this issue in the future?

NA

What alternative solutions did you explore? (Optional)

1. Option 1: Turn off animate:
   Remove this line:
   

   App/src/components/Search/SearchRouter/SearchRouterModal.tsx

   Line 38 in 5c9a614

   shouldUseReanimatedModal={shouldUseNarrowLayout}

   • Can be combined with InteractionManager.runAfterInteractions, however it will create a delay. If this delay is not acceptable, we can combine it with the following option:
   • To increase safety when navigating, we can wrap Navigation.navigate with Navigation.isNavigationReady()

2. Option 2: Remove animate right before navigate.

Reminder: Please use plain English, be brief and avoid jargon. Feel free to use images, charts or pseudo-code if necessary. Do not post large multi-line diffs or write walls of text. Do not create PRs unless you have been hired for this job.

[melvin-bot]

@muttmuure Whoops! This issue is 2 days overdue. Let's get this updated quick!

[melvin-bot]

@muttmuure Still overdue 6 days?! Let's take care of this!

[melvin-bot]

Job added to Upwork: https://www.upwork.com/jobs/~021947799858775511316

[melvin-bot]

Triggered auto assignment to Contributor-plus team member for initial proposal review - @suneox (External)