[Due for payment 2025-05-14] [$250] Reports - Long pressing on an item does not display "Deselect" option #60320

m-natarajan · 2025-04-15T19:45:12Z

melvin-bot · 2025-04-15T19:45:23Z

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 · 2025-04-15T19:58:30Z

🚨 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 · 2025-04-15T19:59:26Z

🚨 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 · 2025-04-15T20:01:05Z

PROPOSAL UPDATED

Added a note

github-actions · 2025-04-15T20:03:08Z

⚠️ 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 · 2025-04-15T20:23:45Z

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 · 2025-04-15T23:59:46Z

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

melvin-bot · 2025-04-15T23:59:51Z

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

shubham1206agra · 2025-04-16T03:18:59Z

@Expensify/design Can we have mock for this change? Since it was not present earlier.

linhvovan29546 · 2025-04-16T03:29:10Z

@shubham1206agra Here's an example from the Categories table https://expensify.slack.com/archives/C01GTK53T8Q/p1744378314184679?thread_ts=1744377560.307809&cid=C01GTK53T8Q

dubielzyk-expensify · 2025-04-16T05:03:03Z

Interesting. Once in select mode after long-pressing I wouldn't expect the same behavior. Curious to hear what @Expensify/design thinks here. We could change it to deselect, but in some ways I feel like the interaction shouldn't be triggered at all?

Maybe it's easy to just change it to deselect though.

melvin-bot · 2025-04-16T08:31:21Z

Triggered auto assignment to @mollfpr, see https://stackoverflow.com/c/expensify/questions/7972 for more details.

shubham1206agra · 2025-04-16T08:32:50Z

@linhvovan29546 Thanks for reporting this issue. I checked with the team about the order of proposal and we don't consider proposals made in slack as of now. Link for reference.

ChavdaSachin · 2025-04-16T08:38:34Z

🚨 Edited by proposal-police: This proposal was edited at 2025-04-17 05:04:09 UTC.

Proposal

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

Long pressing the item while selection mode is on still opens selection options.

What is the root cause of that problem?

Missing case here

App/src/components/Search/SearchList.tsx

Line 163 in 5209c95

    
           if (shouldPreventLongPressRow || !isSmallScreenWidth || item?.isDisabled || item?.isDisabledCheckbox || !isFocused) {

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

Include the missing case to prevent any item long press interaction here.
Add selectionMode?.isEnabled condition to avoid showing the bottom model when selection is already enabled.

            if (shouldPreventLongPressRow || !isSmallScreenWidth || item?.isDisabled || selectionMode?.isEnabled || item?.isDisabledCheckbox || !isFocused) {

App/src/components/Search/SearchList.tsx

Line 163 in 5209c95

    
           if (shouldPreventLongPressRow || !isSmallScreenWidth || item?.isDisabled || item?.isDisabledCheckbox || !isFocused) {

Also implement the same for other pages like workspace Categories page, Tags page, etc...

App/src/components/SelectionListWithModal/index.tsx

Line 82 in 5209c95

    
           if (!turnOnSelectionModeOnLongPress || !isSmallScreenWidth || item?.isDisabled || item?.isDisabledCheckbox || (!isFocused && !isScreenFocused)) {

And of-course some cleanup.

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 could toggle the selection on long press when selection mode is enabled.
To implement which
Modify handleLongPressRow function here for search page.

    const handleLongPressRow =  (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);
    };

App/src/components/Search/SearchList.tsx

Lines 160 to 170 in 5e7543e

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

And modify handleLongPressRow here for categories, tags, etc.. pages.

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

        if (onLongPressRow) {
            onLongPressRow(item);
        }
    };

App/src/components/SelectionListWithModal/index.tsx

Lines 80 to 91 in 5e7543e

    
           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); 
        
               } 
        
           };

Look for any other page which might need the same fix.
And perform some cleanup.

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.

linhvovan29546 · 2025-04-16T08:41:15Z

@shubham1206agra Thanks for the review! Just wondering, should we consider an automated test for this case?

ChavdaSachin · 2025-04-16T08:41:20Z

@shubham1206agra Sorry I am a little bit late to post a proposal.
But my proposal meets the expectations @dubielzyk-expensify posted here #60320 (comment)

Interesting. Once in select mode after long-pressing I wouldn't expect the same behavior. Curious to hear what @Expensify/design thinks here. We could change it to deselect, but in some ways I feel like the interaction shouldn't be triggered at all?

So could you please take a look at my proposal.

shubham1206agra · 2025-04-16T08:55:40Z

@linhvovan29546 Not really

dubielzyk-expensify · 2025-04-16T08:56:15Z

We're gonna get alignment in the design team first before we decide on proposals 😄

shawnborton · 2025-04-16T09:10:51Z

Once in select mode after long-pressing I wouldn't expect the same behavior. Curious to hear what @Expensify/design thinks here. We could change it to deselect, but in some ways I feel like the interaction shouldn't be triggered at all?

I think I generally agree with this? I don't feel strongly but I think this is what I would do. Otherwise yeah, we could just show the deselect option but that feels like overkill when a simple tap of the row would unselect it.

dubielzyk-expensify · 2025-04-16T09:21:38Z

In some apps long pressing in editing mode just toggles the selection like a normal tap. So that's another possibility. Don't think we need the menu is basically what I'm getting at. Happy to disable or just treat it as a tap.

Let's hear what @dannymcclain thinks too

ChavdaSachin · 2025-04-28T18:22:58Z

I've asked a query to @shubham1206agra here. waiting for the reply.

shubham1206agra · 2025-04-29T04:11:01Z

@ChavdaSachin I can't see the question. Can you please recheck?

mollfpr · 2025-05-01T16:15:31Z

No overdue, the PR is still being worked on.

ChavdaSachin · 2025-05-01T21:24:13Z

PR is ready for review.
cc. @shubham1206agra @mollfpr

allgandalf · 2025-05-02T03:34:00Z

if i remember correctly we have disabled long press on selected items on reports page and transaction rows, isn't that correct @shawnborton ? 🤔

@ChavdaSachin what does your PR do exactly?

shubham1206agra · 2025-05-02T04:02:43Z

@allgandalf We are marking long press as regular press in different pages in workspace pages (like Distance Rates, Categories, Tags, Taxes and Report Fields)

allgandalf · 2025-05-02T05:49:45Z

So this has nothing to do with Reports page or transaction row table page?

allgandalf · 2025-05-02T05:50:35Z

We are marking long press as regular press

I didn't get it honestly, so there would be no action if we long press after this PR?

ChavdaSachin · 2025-05-02T06:57:35Z

No worri we will include report page as well. Thanks for hoping in to remind us.

ChavdaSachin · 2025-05-02T13:26:46Z

if i remember correctly we have disabled long press on selected items on reports page and transaction rows, isn't that correct @shawnborton ? 🤔

@ChavdaSachin what does your PR do exactly?

This PR aims to treat the long press as simple click when selection Mode is enabled.

I checked the staging - long press on reports page and transaction rows are working as expected (treating long press as regular click when selection mode is enabled).
So no additional change is required here.

cc. @allgandalf @shubham1206agra

melvin-bot · 2025-05-07T00:13:13Z

Reviewing label has been removed, please complete the "BugZero Checklist".

melvin-bot · 2025-05-07T00:13:21Z

The solution for this issue has been 🚀 deployed to production 🚀 in version 9.1.40-7 and is now subject to a 7-day regression period 📆. Here is the list of pull requests that resolve this issue:

Toggle selection with long press when selection mode is enabled #60595

If no regressions arise, payment will be issued on 2025-05-14. 🎊

For reference, here are some details about the assignees on this issue:

@shubham1206agra requires payment through NewDot Manual Requests
@ChavdaSachin requires payment automatic offer (Contributor)

melvin-bot · 2025-05-07T00:13:22Z

@shubham1206agra @NicMendonca @shubham1206agra The PR fixing this issue has been merged! The following checklist (instructions) will need to be completed before the issue can be closed. Please copy/paste the BugZero Checklist from here into a new comment on this GH and complete it. If you have the K2 extension, you can simply click: [this button]

NicMendonca · 2025-05-14T14:21:13Z

shubham1206agra · 2025-05-14T15:47:29Z

@NicMendonca This is not a bug, but a feature change request.

Here is the test.

Pre-requisites: A workspace with -Distance Rates, Categories, Tags, Taxes and Report Fields enabled.

Navigate to workspace -> members page.
Enable selection mode- ie. long press a row and click select when popover menu is visible.
Now long press on few row one by one.
Verify long pressing a row in selection mode acts the same as simple click.(ie. toggles the selection)
Now repeat step 1-4 for workspace -> Distance Rates, workspace -> Categories, workspace -> Tags, workspace -> Taxes and workspace -> Report Fields.

NicMendonca · 2025-05-14T19:33:38Z

Payment summary

Contributor+: @shubham1206agra - $250 paid via NewDot
Contributor: @ChavdaSachin - $250 paid via Upwork (done ✅ )

m-natarajan added Bug Something is broken. Auto assigns a BugZero manager. Daily KSv2 labels Apr 15, 2025

melvin-bot bot assigned NicMendonca Apr 15, 2025

This comment has been minimized.

Sign in to view

NicMendonca added the External Added to denote the issue can be worked on by a contributor label Apr 15, 2025

melvin-bot bot changed the title ~~Reports - Long pressing on an item does not display "Deselect" option~~ [$250] Reports - Long pressing on an item does not display "Deselect" option Apr 15, 2025

melvin-bot bot added the Help Wanted Apply this label when an issue is open to proposals by contributors label Apr 15, 2025

melvin-bot bot assigned shubham1206agra Apr 15, 2025

This comment has been minimized.

Sign in to view

melvin-bot bot assigned mollfpr Apr 16, 2025

melvin-bot bot added the Overdue label May 1, 2025

melvin-bot bot added Reviewing Has a PR in review Weekly KSv2 and removed Overdue Daily KSv2 labels May 1, 2025

melvin-bot bot added Weekly KSv2 Awaiting Payment Auto-added when associated PR is deployed to production and removed Weekly KSv2 labels May 7, 2025

melvin-bot bot changed the title ~~[$250] Reports - Long pressing on an item does not display "Deselect" option~~ [Due for payment 2025-05-14] [$250] Reports - Long pressing on an item does not display "Deselect" option May 7, 2025

melvin-bot bot removed the Reviewing Has a PR in review label May 7, 2025

melvin-bot bot added Daily KSv2 and removed Weekly KSv2 labels May 13, 2025

NicMendonca closed this as completed May 14, 2025

github-project-automation bot moved this to Done in #expensify-bugs May 14, 2025

[Due for payment 2025-05-14] [$250] Reports - Long pressing on an item does not display "Deselect" option #60320

[Due for payment 2025-05-14] [$250] Reports - Long pressing on an item does not display "Deselect" option #60320

Comments

m-natarajan commented Apr 15, 2025 • edited by melvin-bot bot Loading Uh oh! There was an error while loading. Please reload this page.

Uh oh!

Action Performed:

Expected Result:

Actual Result:

Workaround:

Platforms:

Screenshots/Videos

melvin-bot bot commented Apr 15, 2025

Uh oh!

Krishna2323 commented Apr 15, 2025 • edited by github-actions bot Loading Uh oh! There was an error while loading. Please reload this page.

Uh oh!

Proposal

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

What is the root cause of that problem?

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

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

What alternative solutions did you explore? (Optional)

Result

Uh oh!

samranahm commented Apr 15, 2025 • edited Loading Uh oh! There was an error while loading. Please reload this page.

Uh oh!

Proposal

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

What is the root cause of that problem?

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

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

What alternative solutions did you explore? (Optional)

Uh oh!

Krishna2323 commented Apr 15, 2025

PROPOSAL UPDATED

Uh oh!

This comment has been minimized.

github-actions bot commented Apr 15, 2025

Uh oh!

linhvovan29546 commented Apr 15, 2025

Proposal

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

What is the root cause of that problem?

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

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

What alternative solutions did you explore? (Optional)

Uh oh!

melvin-bot bot commented Apr 15, 2025

Uh oh!

melvin-bot bot commented Apr 15, 2025

Uh oh!

shubham1206agra commented Apr 16, 2025

Uh oh!

linhvovan29546 commented Apr 16, 2025

Uh oh!

dubielzyk-expensify commented Apr 16, 2025

Uh oh!

This comment has been minimized.

melvin-bot bot commented Apr 16, 2025

Uh oh!

shubham1206agra commented Apr 16, 2025

Uh oh!

ChavdaSachin commented Apr 16, 2025 • edited by github-actions bot Loading Uh oh! There was an error while loading. Please reload this page.

Uh oh!

Proposal

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

What is the root cause of that problem?

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

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

What alternative solutions did you explore? (Optional)

Uh oh!

linhvovan29546 commented Apr 16, 2025

Uh oh!

ChavdaSachin commented Apr 16, 2025

Uh oh!

shubham1206agra commented Apr 16, 2025

Uh oh!

dubielzyk-expensify commented Apr 16, 2025

Uh oh!

shawnborton commented Apr 16, 2025

Uh oh!

m-natarajan commented Apr 15, 2025 •

edited by melvin-bot bot

Loading

Krishna2323 commented Apr 15, 2025 •

edited by github-actions bot

Loading

samranahm commented Apr 15, 2025 •

edited

Loading

ChavdaSachin commented Apr 16, 2025 •

edited by github-actions bot

Loading