[HOLD for payment 2024-10-14] [HOLD for payment 2024-10-11] RHP across the app cannot be closed by ESC key

[IuliiaHerets]

If you haven’t already, check out our contributing guidelines for onboarding and email [email protected] to request to join our Slack channel!

---

Version Number: 9.0.44-0
Reproducible in staging?: Y
Reproducible in production?: N
Email or phone of affected tester (no customers): [email protected]
Issue reported by: Applause Internal Team

Action Performed:

1. Go to staging.new.expensify.com
2. Open any RHP (via FAB > Submit expense, or open Find page).
3. Press ESC.

Expected Result:

RHP can be closed by ESC key.

Actual Result:

RHP cannot be closed by ESC key.

Workaround:

Unknown

Platforms:

• Android: Native
• Android: mWeb Chrome
• iOS: Native
• iOS: mWeb Safari
• MacOS: Chrome / Safari
• MacOS: Desktop

Screenshots/Videos

Bug6623232_1727962471229.esc.mp4

View all open jobs on GitHub

Issue Owner

Current Issue Owner: @CortneyOfstad

[melvin-bot]

Triggered auto assignment to @CortneyOfstad (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.

[melvin-bot]

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

[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.

[bernhardoj]

Same as #49869

Proposal

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

Can't close RHP using ESC key.

What is the root cause of that problem?

The ESC shortcut is overridden by the SearchRouter shortcut here.

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

Lines 62 to 65 in 71db3f1

	useKeyboardShortcut(CONST.KEYBOARD_SHORTCUTS.ESCAPE, () => {
	closeSearchRouter();
	clearUserQuery();
	});

The SearchRouter is added to the AuthScreens which is available app wide.

App/src/libs/Navigation/AppNavigator/AuthScreens.tsx

Line 573 in 71db3f1

<SearchRouter />

Because of that, the shortcut here to close RHP doesn't work anymore.

App/src/libs/Navigation/AppNavigator/AuthScreens.tsx

Lines 308 to 320 in 71db3f1

	const unsubscribeEscapeKey = KeyboardShortcut.subscribe(
	shortcutConfig.shortcutKey,
	() => {
	if (modal.current.willAlertModalBecomeVisible) {
	return;
	}
	if (modal.current.disableDismissOnEscape) {
	return;
	}
	Navigation.dismissModal();
	},

This somehow happens after #49457. Before that, the SearchRouter shortcut is subscribed first, followed by the AuthScreen shortcut. The reason the SearchRouter shortcut still works is that we enable bubbling in the AuthScreen shortcut.

So, the root cause of the issue has been existed for several weeks.

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

In SearchRouter, only enable the shortcut when visible.

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

Lines 62 to 65 in 71db3f1

	useKeyboardShortcut(CONST.KEYBOARD_SHORTCUTS.ESCAPE, () => {
	closeSearchRouter();
	clearUserQuery();
	});

useKeyboardShortcut(CONST.KEYBOARD_SHORTCUTS.ESCAPE, () => {
    closeSearchRouter();
    clearUserQuery();
}, {isActive: isSearchRouterDisplayed});

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

Line 25 in 71db3f1

const [userSearchQuery, setUserSearchQuery] = useState<SearchQueryJSON | undefined>(undefined);

However, I noticed that we only clear the query when closing the modal using ESC, but the query state stays if we close it by simply clicking outside the modal. To solve this, instead of clearing the query inside the shortcut, we can clear it when the modal closes.

onModalHide={clearUserQuery}

[rayane-djouah]

This is fixed in #50143
cc @luacmartins @SzymczakJ

[arosiclair]

I reproduced on staging v9.0.44-0 and not on prod v9.0.43-6

[arosiclair]

Confirmed reverting #49457 fixes the issue. Should we just CP #50143?

[rayane-djouah]

@arosiclair I think @luacmartins is going to request CP for #50143 as it also fixes another blocker

[melvin-bot]

⚠️ Looks like this issue was linked to a Deploy Blocker here

If you are the assigned CME please investigate whether the linked PR caused a regression and leave a comment with the results.

If a regression has occurred and you are the assigned CM follow the instructions here.

If this regression could have been avoided please consider also proposing a recommendation to the PR checklist so that we can avoid it in the future.

[luacmartins]

Yea, I requested the CP

[jasperhuangg]

CP is running

[arosiclair]

Fixed in v9.0.44-2

Screen.Recording.2024-10-03.at.12.57.13.PM.mov

[melvin-bot]

The solution for this issue has been 🚀 deployed to production 🚀 in version 9.0.44-12 and is now subject to a 7-day regression period 📆. Here is the list of pull requests that resolve this issue:

• Fix performance of SearchRouter #50143

If no regressions arise, payment will be issued on 2024-10-11. 🎊

[melvin-bot]

The solution for this issue has been 🚀 deployed to production 🚀 in version 9.0.45-4 and is now subject to a 7-day regression period 📆. Here is the list of pull requests that resolve this issue:

• Fix performance of SearchRouter #50143

If no regressions arise, payment will be issued on 2024-10-14. 🎊

[melvin-bot]

BugZero Checklist: The PR fixing this issue has been merged! The following checklist (instructions) will need to be completed before the issue can be closed:

• [@arosiclair] The PR that introduced the bug has been identified. Link to the PR:
• [@arosiclair] The offending PR has been commented on, pointing out the bug it caused and why, so the author and reviewers can learn from the mistake. Link to comment:
• [@arosiclair] A discussion in #expensify-bugs has been started about whether any other steps should be taken (e.g. updating the PR review checklist) in order to catch this type of bug sooner. Link to discussion:
• [@arosiclair] Determine if we should create a regression test for this bug.
• [@arosiclair] If we decide to create a regression test for the bug, please propose the regression test steps to ensure the same bug will not reach production again.
• [@CortneyOfstad] Link the GH issue for creating/updating the regression test once above steps have been agreed upon: