[Due for payment 2025-05-27] [Due for payment 2025-05-08] [$250] Distance rates - User goes to rate details when tapping on it in multiselect mode

[jponikarchuk]

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: v9.1.15-3
Reproducible in staging?: Yes
Reproducible in production?: Yes
If this was caught on HybridApp, is this reproducible on New Expensify Standalone?: Yes, reproducible on both
If this was caught during regression testing, add the test name, ID and link from TestRail: https://expensify.testrail.io/index.php?/tests/view/5766860
Email or phone of affected tester (no customers): sustinov@applausemail.com
Issue reported by: Applause Internal Team
Device used: OnePlus 9 PRO/Android 14/Chrome, iPhone 12 PRO/iOS 18.3.1
App Component: Workspace Settings

Action Performed:

Prerequisites:
Create a WS, in the WS settings enable Distance rates, create multiple rates

Steps:

1. Open Hybrid ND app
2. Log in as a user with a configured WS
3. Navigate to the WS settings
4. Navigate to Distance rates
5. Long press on any rate to activate multiselection
6. Tap in the middle on any rate

Expected Result:

When you click on a rate in multiselect mode, that rate should select, not go to its details

Actual Result:

User goes to rate details when tapping on it in multiselect mode. In categories and tags, this field is selected when you tap on the field itself

Workaround:

Unknown

Platforms:

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

Screenshots/Videos

1.mp4

View all open jobs on GitHub

Upwork Automation - Do Not Edit

• Upwork Job URL: https://www.upwork.com/jobs/~021902356609676349283
• Upwork Job ID: 1902356609676349283
• Last Price Increase: 2025-04-02
• Automatic offers:
• allgandalf | Reviewer | 106824264
• abzokhattab | Contributor | 106824265

Issue Owner

Current Issue Owner: @maddylewis

[melvin-bot]

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

[nkdengineer]

Proposal

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

User goes to rate details when tapping on it in multiselect mode. In categories and tags, this field is selected when you tap on the field itself

What is the root cause of that problem?

We are navigating when click the distance rate row

App/src/pages/workspace/distanceRates/PolicyDistanceRatesPage.tsx

Lines 187 to 190 in 52b22cb

	const openRateDetails = (rate: RateForList) => {
	Navigation.navigate(ROUTES.WORKSPACE_DISTANCE_RATE_DETAILS.getRoute(policyID, rate.value));
	};

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

We should add the condition like in the category page here

        if (isSmallScreenWidth && selectionMode?.isEnabled) {
            toggleRate(rate);
            return;
        }

Note: We can fix the other page if it get the same bug

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.

[github-actions]

⚠️ @abzokhattab 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).

[abzokhattab]

🚨 Edited by proposal-police: This proposal was edited at 2025-03-19 10:51:54 UTC.

Proposal

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

In multi-selection mode inside the distance rates, tapping on a row triggers navigation to the details page, when the expected behavior is to simply toggle the selection state.

What is the root cause of that problem?

The selectRow function inside the selection modal always triggers navigation to the details page, even in multi-selection mode, without checking whether we want to toggle the selection or navigate.

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

To fix the root cause of this issue and prevent it in other places, we should disable executing the onSelectRow function inside the selection list if canSelectMultiple is true and isSmallScreenWidth.
We can modify this part in the BaseSelectionListItemRenderer.tsx

App/src/components/SelectionList/BaseSelectionListItemRenderer.tsx

Lines 62 to 68 in bea3eb9

	onSelectRow={() => {
	if (shouldSingleExecuteRowSelect) {
	singleExecution(() => selectRow(item, index))();
	} else {
	selectRow(item, index);
	}
	}}

to

onSelectRow={() => {
    if (canSelectMultiple && isSmallScreenWidth) {
         handleOnCheckboxPress(); 
    } else if (shouldSingleExecuteRowSelect) {
        singleExecution(() => selectRow(item, index))();
    } else {
        selectRow(item, index);
    }
}}

Optional: we can make this behavior optional by introducing a boolean prop such as shouldExecuteCheckboxSelectionOnMobile, which would allow us to enable or disable this behavior only in components where needed. This would prevent breaking any existing functionality and give us the flexibility to control it per component.

POC:

Screen.Recording.2025-03-19.at.11.52.37.mov

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)

Alternatively we can change the selection function inside
the BaseSelectionList instead of the BaseSelectionListItemRenderer here

we can add this condition to top of this function

     if (canSelectMultiple && isSmallScreenWidth) {
                onCheckboxPress?.(item);
                return;
            }

[melvin-bot]

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

[melvin-bot]

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

[Krishna2323]

Proposal

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

Distance rates - User goes to rate details when tapping on it in multiselect mode

What is the root cause of that problem?

• We don't have mechanism to prevent calling onSelectRow when selectionMode?.isEnabled is true and option can be selected. This should be applied in SelectionListWithModal.

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

• First we need to extract onSelectRow & onCheckboxPress from the props here.
• Then we would need to create a function onPress to call the onCheckboxPress function when selectionMode?.isEnabled and other required conditions are true.

    const onPress = (item: TItem) => {
        if (selectionMode?.isEnabled && onCheckboxPress && isSmallScreenWidth && !item?.isDisabled && !item?.isDisabledCheckbox) {
            onCheckboxPress(item);
            return;
        }
        onSelectRow(item);
    };

• Lastly we would need to pass onPress and onCheckboxPress to SelectionList.

        <SelectionList
            ref={ref}
            sections={sections}
            onLongPressRow={handleLongPressRow}
            isScreenFocused={isScreenFocused}
            onSelectRow={onPress}
            onCheckboxPress={onCheckboxPress}
            // eslint-disable-next-line react/jsx-props-no-spreading
            {...rest}
        />

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

N/A

What alternative solutions did you explore? (Optional)

Result