Hold - "Confirm payment amount" modal appears on top of Troubleshoot menu

[izarutskaya]

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.4-0
Reproducible in staging?: Y
Reproducible in production?: Y
Found when validating PR : #42736
Logs: https://stackoverflow.com/c/expensify/questions/4856
Issue reported by: Applause-Internal team

Action Performed:

1. Go to staging.new.expensify.com
2. Go to workspace chat.
3. Submit an expense.
4. Go to transaction thread.
5. Click 3-dot menu > Hold.
6. Hold the expense.
7. Click Pay elsewhere.
8. While "Confirm payment amount" modal is showing, open Troubleshoot menu via CMD+D.

Expected Result:

Troubleshoot menu will appear on top of "Confirm payment amount" modal.

Actual Result:

"Confirm payment amount" modal appears on top of Troubleshoot menu.

Workaround:

Unknown

Platforms:

Which of our officially supported platforms is this issue occurring on?

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

Screenshots/Videos

Bug6532597_1720053895748.20240704_084246.mp4

View all open jobs on GitHub

[melvin-bot]

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

[izarutskaya]

We think this issue might be related to the #collect project.

[bernhardoj]

Proposal

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

The confirm payment amount modal is shown on top of the troubleshoot modal.

What is the root cause of that problem?

This happens to every modal, not limited to confirm payment amount modal. When we press the troubleshoot menu shortcut, we toggle the troubleshoot menu modal visibility.

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

Lines 300 to 305 in 74a6dbb

	const unsubscribeDebugShortcut = KeyboardShortcut.subscribe(
	debugShortcutConfig.shortcutKey,
	() => {
	toggleTestToolsModal();
	},
	debugShortcutConfig.descriptionKey,

If we see on other shortcuts, we always close the modal first and wait for until it's closed before executing the shortcut navigation.

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

Lines 290 to 294 in 74a6dbb

	const unsubscribeChatShortcut = KeyboardShortcut.subscribe(
	chatShortcutConfig.shortcutKey,
	() => {
	Modal.close(Session.checkIfActionIsAllowed(() => Navigation.navigate(ROUTES.NEW)));
	},

But we don't do it for troubleshoot menu modal shortcuts, so the confirm payment amount or any modal/popover is still visible..

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

Wrap the troubleshoot menu shortcut with Modal.close

Modal.close(toggleTestToolsModal);

[RachCHopkins]

Just clarifying internally on this one as it's not customer-facing.

[RachCHopkins]

Closing per internal discussion.