[Due for payment 2025-03-31] [$250] There is option as `select` even when we press on selected option

[m-natarajan]

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.3-4
Reproducible in staging?: Y
Reproducible in production?: y
If this was caught on HybridApp, is this reproducible on New Expensify Standalone?:
If this was caught during regression testing, add the test name, ID and link from TestRail:
Email or phone of affected tester (no customers):
Logs: https://stackoverflow.com/c/expensify/questions/4856
Expensify/Expensify Issue URL:
Issue reported by: @allgandalf
Slack conversation (hyperlinked to channel name): expensify bug

Action Performed:

1. Tap search icon and go to reports
2. Long press on any report
3. Observe select option at the botton
4. Long press on the same report

Expected Result:

Should change to "unselect"

Actual Result:

we still see Select Option for an already selected Report
Note: Happening in Tags

• Categories
• Taxes, etc

Workaround:

unknown

Platforms:

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

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

Screenshots/Videos

Add any screenshot/video evidence

Screen.Recording.2025-02-21.at.1.04.15.PM.mov

View all open jobs on GitHub

Upwork Automation - Do Not Edit

• Upwork Job URL: https://www.upwork.com/jobs/~021894066406775834467
• Upwork Job ID: 1894066406775834467
• Last Price Increase: 2025-02-24
• Automatic offers:
• allgandalf | Contributor | 106292953

Issue Owner

Current Issue Owner: @isabelastisser

[melvin-bot]

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

[Shahidullah-Muffakir]

Proposal

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

Even if an option is selected, we display the "Select" text, it should shows Unselect if it is selected.

What is the root cause of that problem?

We are not considering the the state of item, whether it is selected or not here:

App/src/components/SelectionListWithModal/index.tsx

Line 120 in 0b6d1a0

title={translate('common.select')}

we are always using the "Select" text.

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

1. check if the longPressedItem.isSelected is true then show the unselect translation , other wise use the select translation as:

        title={longPressedItem?.isSelected ? translate('common.unselect') : translate('common.select')}

2. Create translation key for unselect in both es.ts and en.ts files

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. We can create a state variable for the the title text, and then update it in a useEffect, if the longPressedItem changes as:

    const [titleText, setTitleText] = useState(translate('common.select'));
    useEffect(() => {
        if (longPressedItem?.isSelected) {
            setTitleText(translate('common.unselect'))
            return;
        }
        setTitleText(translate('common.select'))
    }, [translate, longPressedItem])

2. Use the titleText here:
   

   App/src/components/SelectionListWithModal/index.tsx

   Line 120 in 0b6d1a0

   title={translate('common.select')}

Screen.Recording.2025-02-22.at.4.48.47.AM.mov

[bernhardoj]

Proposal

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

The option to select still shows when long pressing a selected item.

What is the root cause of that problem?

We always show the select option when long pressing the item.

App/src/components/SelectionListWithModal/index.tsx

Lines 119 to 120 in 0b6d1a0

	<MenuItem
	title={translate('common.select')}

I think the issue here is that the item can still be long-pressed to select even though the selection mode is already enabled.

App/src/components/SelectionListWithModal/index.tsx

Lines 81 to 92 in 0b6d1a0

	const handleLongPressRow = (item: TItem) => {
	// eslint-disable-next-line @typescript-eslint/prefer-nullish-coalescing
	if (!turnOnSelectionModeOnLongPress || !isSmallScreenWidth || item?.isDisabled || item?.isDisabledCheckbox || (!isFocused && !isScreenFocused)) {
	return;
	}
	setLongPressedItem(item);
	setIsModalVisible(true);
	if (onLongPressRow) {
	onLongPressRow(item);
	}
	};

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

We can ignore the long press to select if selection mode is already enabled.

if (... || selectionMode?.isEnabled) {
    return;
}

btw, i think the onLongPressRow should be put before the early return

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

We can render SelectionListWithModal, long press one of the item, then long press again and verify there is no select option modal show.

[allgandalf]

Note

To any future C+ assigned, please read the attached thread link for full issue context, we want to show the deselect button and also please review my proposal too from here, I guess QA forgot to post it over the issue

[dannymcclain]

Here's a quick mock showing the different menu items with the updated icons:

Note that we want the option to say Deselect instead of Unselect.

Icon files: select-icons.zip

[melvin-bot]

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

[melvin-bot]

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