[Due for payment 2025-03-21] [$250] mWeb - Reports - Expenses categories are opened several times if tapped more than once.

[IuliiaHerets]

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.6-0
Reproducible in staging?: Yes
Reproducible in production?: Yes
If this was caught during regression testing, add the test name, ID and link from TestRail: https://expensify.testrail.io/index.php?/tests/view/5654462&group_by=cases:section_id&group_order=asc&group_id=296775
Email or phone of affected tester (no customers): ibellicotest+318@gmail.com
Issue reported by: Applause Internal Team
Device used: Motorola MotoG60 - Android 12 - Chrome
App Component: Money Requests

Action Performed:

1. Open the staging.new.expensify.com website.
2. Tap on "Reports"
3. Open any expense.
4. Open any category on the expense report, by tapping more than once on it, (For example: Amount)
5. Tap on the arrow on the top left corner.
6. Check if you land on expense report again or if you land on the same page one more time.

Expected Result:

Expense categories should only by opened once, despite tapping more than once on them.

Actual Result:

Expenses categories on expense report, are opened several times if the user taps more than once to open them. This only happens when opening the expense report on "Reports" section.

Workaround:

Unknown

Platforms:

• Android: Standalone
• Android: HybridApp
• Android: mWeb Chrome
• iOS: Standalone
• iOS: HybridApp
• iOS: mWeb Safari
• MacOS: Chrome / Safari
• MacOS: Desktop

Screenshots/Videos

Bug6754713_1740556223314.Several.mp4

View all open jobs on GitHub

Upwork Automation - Do Not Edit

• Upwork Job URL: https://www.upwork.com/jobs/~021897131243162071587
• Upwork Job ID: 1897131243162071587
• Last Price Increase: 2025-03-05

Issue Owner

Current Issue Owner: @johncschuster

[melvin-bot]

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

[github-actions]

⚠️ Thanks for your proposal. Please update it to follow the proposal template, as proposals are only reviewed if they follow that format (note the mandatory sections).

[bernhardoj]

Proposal

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

Expenses field page opened multiple times when pressing it multiple times.

What is the root cause of that problem?

We already have a logic to ignore the navigation action if the path and params are the same.

App/src/libs/Navigation/helpers/linkTo/index.ts

Lines 102 to 105 in 4fe7c70

	// We don't want to dispatch action to push/replace with exactly the same route that is already focused.
	if (areNamesAndParamsEqual(currentState, stateFromPath)) {
	return;
	}

However, in our case, the params are different, specifically the backTo params.

App/src/components/ReportActionItem/MoneyRequestView.tsx

Lines 613 to 621 in 4fe7c70

	Navigation.navigate(
	ROUTES.MONEY_REQUEST_STEP_DESCRIPTION.getRoute(
	CONST.IOU.ACTION.EDIT,
	iouType,
	transaction.transactionID,
	report.reportID,
	Navigation.getReportRHPActiveRoute(),
	),
	);

Navigation.getReportRHPActiveRoute() returns the currently active route, so if we press it multiple times, it will eventually take the current route of the expense field page, for example, the expense description.

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

To make the logic pure (kinda), we can store the active route in a ref whenever we first press any field. If it already exists, then we won't change it.

onPress={() => {
    if (!transaction?.transactionID || !report?.reportID) {
        return;
    }
    if (!activeRoute.current) {
        activeRoute.current = Navigation.getReportRHPActiveRoute();
    }

    Navigation.navigate(
        ROUTES.MONEY_REQUEST_STEP_DESCRIPTION.getRoute(
            CONST.IOU.ACTION.EDIT,
            iouType,
            transaction.transactionID,
            report.reportID,
            activeRoute.current,
        ),
    );
}}

Since it happens to every fields, we can create a useActiveRoute hook.

const {getReportRHPActiveRoute} = useActiveRoute();

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

N/A

[linhvovan29546]

🚨 Edited by proposal-police: This proposal was edited at 2025-02-26 14:23:41 UTC.

Proposal

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

mWeb - Reports - Expenses categories are opened several times if tapped more than once.

What is the root cause of that problem?

On the web, when clicking a button, we do not handling singleExecution as we do on native, so the onPress fired multiple time.

App/src/hooks/useSingleExecution/index.ts

Line 10 in 4fe7c70

export default function useSingleExecution() {

When a menu item is clicked, we navigate to the target screen. However, in this case, the navigation action is triggered multiple times.

App/src/components/ReportActionItem/MoneyRequestView.tsx

Line 582 in 4fe7c70

onPress={() => {

Although we have logic to prevent navigation to the same screen, in the OP, we navigate with backTo, which causes the condition to evaluate as false, leading to multiple instances of the screen opening.

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

We can prevent the onPress action from executing multiple times on the web by using useDebounce as shown below:

App/src/components/ReportActionItem/MoneyRequestView.tsx

Line 104 in 4fe7c70

function MoneyRequestView({report, shouldShowAnimatedBackground, readonly = false, updatedTransaction, isFromReviewDuplicates = false}: MoneyRequestViewProps) {

    const debounceOnPress = useDebounce(
        (action) => action(),
        CONST.TIMING.USE_DEBOUNCED_STATE_DELAY,
        {
            leading: true, trailing: false 
        }
    );

Then, we need to wrap the onPress of MenuItemWithTopDescription in with debounceOnPress, like this:

 onPress={()=>{debounceOnPress(()=>{
  ....Navigation.navigate
}}

Note: We need to wrap it in the specific place where the navigation issue occurs.

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

We can write a test to verify that action is only executed one time times when clicking multiple times

What alternative solutions did you explore? (Optional)

We can apply the code above to GenericPressable and enable it using a specific flag for safety.

[melvin-bot]

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

[melvin-bot]

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