[Due for payment 2025-05-14] [$250] Reports - Long pressing on an item does not display "Deselect" 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.28-1
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: @linhvovan29546
Slack conversation (hyperlinked to channel name): #expensify-opensource

Action Performed:

1. Go to reports
2. Long press on any item
3. Press Select
4. Long press on the same item

Expected Result:

Should show "Deselect"

Actual Result:

Not displayed "Deselect"

Workaround:

unknown

Platforms:

Select the officially supported platforms where the issue was reproduced:

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

Platforms Tested:

On which of our officially supported platforms was this issue tested:

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

Screenshots/Videos

Add any screenshot/video evidence

Screen.Recording.2025-04-11.at.17.10.41.mov

NSHB7846.1.MP4

View all open jobs on GitHub

Upwork Automation - Do Not Edit

• Upwork Job URL: https://www.upwork.com/jobs/~021912294803414711441
• Upwork Job ID: 1912294803414711441
• Last Price Increase: 2025-04-15
• Automatic offers:
• ChavdaSachin | Contributor | 106996720

Issue Owner

Current Issue Owner: @NicMendonca

[melvin-bot]

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

[Krishna2323]

🚨 Edited by proposal-police: This proposal was edited at 2025-04-15 20:01:04 UTC.

Proposal

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

Reports - Long pressing on an item does not display "Deselect" option

What is the root cause of that problem?

In SearchList component we don't show the text according to the selected item state like we do in SelectionListWithModal.

App/src/components/SelectionListWithModal/index.tsx

Lines 119 to 120 in 89dadb3

	title={longPressedItem?.isSelected ? translate('common.deselect') : translate('common.select')}
	icon={longPressedItem?.isSelected ? EmptySquare : CheckSquare}

App/src/components/Search/SearchList.tsx

Lines 384 to 388 in 89dadb3

	<MenuItem
	title={translate('common.select')}
	icon={Expensicons.Checkmark}
	onPress={turnOnSelectionMode}
	/>

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

• Update SearchList's MenuItem to use appropriate text and icon as we do in SelectionListWithModal.
• Note: We might want to use different icon for deselection state.

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

N/A -- UI issue

What alternative solutions did you explore? (Optional)

Result

[samranahm]

🚨 Edited by proposal-police: This proposal was edited at 2025-04-15 20:04:20 UTC.

Proposal

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

Reports - Long pressing on an item does not display "Deselect" option

What is the root cause of that problem?

Here

App/src/components/Search/SearchList.tsx

Lines 384 to 387 in 1f5363b

	<MenuItem
	title={translate('common.select')}
	icon={Expensicons.Checkmark}
	onPress={turnOnSelectionMode}

we just have title={translate('common.select')}

instead of

App/src/components/SelectionListWithModal/index.tsx

Lines 118 to 119 in 1f5363b

	<MenuItem
	title={longPressedItem?.isSelected ? translate('common.deselect') : translate('common.select')}

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

We should update this logic to

<MenuItem
    title={longPressedItem?.isSelected ? translate('common.deselect') : translate('common.select')}
    icon={longPressedItem?.isSelected ? Expensicons.EmptySquare : Expensicons.CheckSquare}

Updating the proposal to meet expected results #60320 (comment)
Now we don't need to implement new title

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

We just need to add a check if (selectionMode?.isEnabled) in handleLongPressRow and make it behave as normal tap, also need to add selectionMode, onCheckboxPress in dependencies array

Just update this

App/src/components/Search/SearchList.tsx

Lines 160 to 161 in 0591b9c

	const handleLongPressRow = useCallback(
	(item: SearchListItem) => {

logic to

const handleLongPressRow = useCallback(
  (item: SearchListItem) => {
      // eslint-disable-next-line @typescript-eslint/prefer-nullish-coalescing
      if (shouldPreventLongPressRow || !isSmallScreenWidth || item?.isDisabled || item?.isDisabledCheckbox || !isFocused) {
          return;
      }
          if (selectionMode?.isEnabled) {
          onCheckboxPress?.(item);
          return;
      }
      setLongPressedItem(item);
      setIsModalVisible(true);
  },
  [isFocused, isSmallScreenWidth, shouldPreventLongPressRow, selectionMode, onCheckboxPress],
);

We can do the same on Tags and Categories page.

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)

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.

[Krishna2323]

PROPOSAL UPDATED

• Added a note

[jaydamani]

Proposal

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

Long pressing on an item does not display "Deselect" optio

What is the root cause of that problem?

We always show select text in the modal

App/src/components/Search/SearchList.tsx

Lines 378 to 389 in c7b5ba1

	<Modal
	isVisible={isModalVisible}
	type={CONST.MODAL.MODAL_TYPE.BOTTOM_DOCKED}
	onClose={() => setIsModalVisible(false)}
	shouldPreventScrollOnFocus
	>
	<MenuItem
	title={translate('common.select')}
	icon={Expensicons.Checkmark}
	onPress={turnOnSelectionMode}
	/>
	</Modal>

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

Update the modal to show unselect when the item is already selected. we should also update the icon

    <MenuItem
        title={longPressedItem?.isSelected ? translate('common.deselect') : translate('common.select')}
        icon={longPressedItem?.isSelected ? Expensicons.CheckSquare : Expensicons.Checkmark}
        onPress={turnOnSelectionMode}
    />

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

UI issue

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]

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

[linhvovan29546]

Proposal

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

Reports - Long pressing on an item does not display "Deselect" option

What is the root cause of that problem?

In SearchList, we currently lack the logic to display the “Deselect” option when an item is already selected

App/src/components/Search/SearchList.tsx

Lines 360 to 364 in 76d3b13

	<MenuItem
	title={translate('common.select')}
	icon={Expensicons.Checkmark}
	onPress={turnOnSelectionMode}
	/>

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

We should display either the "Select" or "Deselect" option based on longPressedItem?.isSelected, similar to how it’s handled here.

App/src/components/Search/SearchList.tsx

Lines 360 to 364 in 76d3b13

	<MenuItem
	title={translate('common.select')}
	icon={Expensicons.Checkmark}
	onPress={turnOnSelectionMode}
	/>

                <MenuItem
                    title={longPressedItem?.isSelected ? translate('common.deselect') : translate('common.select')}
                    icon={longPressedItem?.isSelected ? EmptySquare : CheckSquare}
                    onPress={turnOnSelectionMode}
                />

Note

Note for C+: I'm not sure if this is valid as the initial proposal. I reported the bug here and previously provided a solution

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

I think the test is unnecessary here because we already have a test for it. But if we believe it's necessary, we can render the SearchList and simulate a long-press event, similar to how it's done in WorkspaceTagsTest

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.

[melvin-bot]

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