Skip to content

[Due for payment 2025-04-14] [$250] Scan receipt-Choose an action bar is shown twice #59040

New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Closed
1 of 8 tasks
mitarachim opened this issue Mar 25, 2025 · 18 comments
Closed
1 of 8 tasks
Assignees
Labels
Awaiting Payment Auto-added when associated PR is deployed to production Bug Something is broken. Auto assigns a BugZero manager. Daily KSv2 External Added to denote the issue can be worked on by a contributor

Comments

@mitarachim
Copy link

mitarachim commented Mar 25, 2025

If you haven’t already, check out our contributing guidelines for onboarding and email [email protected] to request to join our Slack channel!


Version Number: 9.1.18-2
Reproducible in staging?: Yes
Reproducible in production?: Yes
If this was caught on HybridApp, is this reproducible on New Expensify Standalone?: N/A
If this was caught during regression testing, add the test name, ID and link from TestRail: #54551
Email or phone of affected tester (no customers): [email protected]
Issue reported by: Applause Internal Team
Device used: Samsung S23FE/ Android 14
App Component: Money Requests

Action Performed:

Precondition: Camera permission granted on the web browser.

Steps:

  1. Go to https://staging.new.expensify.com/
  2. Login with any account
  3. Tap on FAB
  4. Tap Create Expense
  5. Tap on the Scan tab if needed
  6. Tap twice on the Choose an Action button, next to the Shot button

Expected Result:

The "Choose an action" bar is shown only once after tapping the Choose an action button, and next after selecting a file, the Choose recipient page is displayed.

Actual Result:

The "Choose an action" bar is shown again after selecting a file and the selected file is lost.

Workaround:

Unknown

Platforms:

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

Screenshots/Videos

Bug6781070_1742865013479.Choose_an_action_bar.mp4

View all open jobs on GitHub

Upwork Automation - Do Not Edit
  • Upwork Job URL: https://www.upwork.com/jobs/~021904624742452177775
  • Upwork Job ID: 1904624742452177775
  • Last Price Increase: 2025-03-25
  • Automatic offers:
    • linhvovan29546 | Contributor | 106698062
Issue OwnerCurrent Issue Owner: @Pujan92
@mitarachim mitarachim added Bug Something is broken. Auto assigns a BugZero manager. Daily KSv2 labels Mar 25, 2025
Copy link

melvin-bot bot commented Mar 25, 2025

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.

@linhvovan29546
Copy link
Contributor

linhvovan29546 commented Mar 25, 2025

🚨 Edited by proposal-police: This proposal was edited at 2025-03-25 08:22:44 UTC.

Proposal

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

Scan receipt-Choose an action bar is shown twice

What is the root cause of that problem?

The problem occurs because tapping the "Choose an Action" button twice quickly calls openPicker twice. This leads to the action bar show twice, and after select a file that show again

{children({
openPicker: ({onPicked: newOnPicked, onCanceled: newOnCanceled = () => {}}) => {
onPicked.current = newOnPicked;
fileInput.current?.click();
onCanceled.current = newOnCanceled;
},
})}

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

We can Introduce a flag isPickingRef inside AttachmentPicker to prevent multiple picker actions:

function AttachmentPicker({children, type = CONST.ATTACHMENT_PICKER_TYPE.FILE, acceptedFileTypes, allowMultiple = false}: AttachmentPickerProps): React.JSX.Element {

  1. Create isPickingRef (a useRef boolean) to track whether the picker is already open.
    const isPickingRef = useRef(false); 
  1. Then, return early in openPicker if isPickingRef.current is already true.
            {children({
                openPicker: ({onPicked: newOnPicked, onCanceled: newOnCanceled = () => {}}) => {
                    if (isPickingRef.current) {
                        return; // Prevent multiple rapid calls
                    }
                    isPickingRef.current = true;
                    onPicked.current = newOnPicked;
                    fileInput.current?.click();
                    onCanceled.current = newOnCanceled;
                },
            })}
  1. Finally, reset isPickingRef.current when a file is selected or when the picker is canceled.
                onChange={(e) => {
                    isPickingRef.current = false; // Reset flag after picking
...
                }}
.....
   fileInput.current.addEventListener(
                        'cancel',
                        () => {
                            isPickingRef.current = false; // Reset flag on cancel
....
                    );
                }}

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

We can write unit test to trigger openPicker, then verify that not call multiple times

What alternative solutions did you explore? (Optional)

We can use useDebounce hook to prevent openPicker called multiple times

@daledah
Copy link
Contributor

daledah commented Mar 25, 2025

Proposal

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

The "Choose an action" bar is shown again after selecting a file and the selected file is lost.

What is the root cause of that problem?

We don't have logics to limit number of presses on choose file button

onPress={() => {
openPicker({
onPicked: (data) => setReceiptAndNavigate(data.at(0) ?? {}),
});
}}

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

Add a ref to track if button is pressed

const isButtonPressedRef = useRef(false)

And modify the onPress function

onPress={() => {
openPicker({
onPicked: (data) => setReceiptAndNavigate(data.at(0) ?? {}),
});
}}

onPress={() => {
    if (isPressedRef.current) {
        return;
    }
    isPressedRef.current = true;
    openPicker({
        onPicked: (data) => {
            isPressedRef.current = false
            setReceiptAndNavigate(data.at(0) ?? {})}
        },
        onCanceled: () => {
            isPressedRef.current = false;
        },
    });
}}

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)

If we want to fix this issue globally, we can apply the solution directly inside AttachmentPicker.

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.

@NicMendonca NicMendonca added the External Added to denote the issue can be worked on by a contributor label Mar 25, 2025
@melvin-bot melvin-bot bot changed the title Scan receipt-Choose an action bar is shown twice [$250] Scan receipt-Choose an action bar is shown twice Mar 25, 2025
Copy link

melvin-bot bot commented Mar 25, 2025

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

@melvin-bot melvin-bot bot added the Help Wanted Apply this label when an issue is open to proposals by contributors label Mar 25, 2025
Copy link

melvin-bot bot commented Mar 25, 2025

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

@Pujan92
Copy link
Contributor

Pujan92 commented Mar 26, 2025

@linhvovan29546's proposal looks good to me as it is more generic because it is suggesting the fix in the AttachmentPicker, which is used in multiple places(eg, profile avatar and all other places for file upload).

🎀👀🎀 C+ reviewed

Copy link

melvin-bot bot commented Mar 26, 2025

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

@melvin-bot melvin-bot bot removed the Help Wanted Apply this label when an issue is open to proposals by contributors label Mar 27, 2025
Copy link

melvin-bot bot commented Mar 27, 2025

📣 @linhvovan29546 🎉 An offer has been automatically sent to your Upwork account for the Contributor role 🎉 Thanks for contributing to the Expensify app!

Offer link
Upwork job
Please accept the offer and leave a comment on the Github issue letting us know when we can expect a PR to be ready for review 🧑‍💻
Keep in mind: Code of Conduct | Contributing 📖

@melvin-bot melvin-bot bot added Reviewing Has a PR in review Weekly KSv2 and removed Daily KSv2 labels Mar 29, 2025
@melvin-bot melvin-bot bot added Weekly KSv2 Awaiting Payment Auto-added when associated PR is deployed to production and removed Weekly KSv2 labels Apr 7, 2025
@melvin-bot melvin-bot bot changed the title [$250] Scan receipt-Choose an action bar is shown twice [Due for payment 2025-04-14] [$250] Scan receipt-Choose an action bar is shown twice Apr 7, 2025
Copy link

melvin-bot bot commented Apr 7, 2025

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

@melvin-bot melvin-bot bot removed the Reviewing Has a PR in review label Apr 7, 2025
Copy link

melvin-bot bot commented Apr 7, 2025

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

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

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

Copy link

melvin-bot bot commented Apr 7, 2025

@Pujan92 @NicMendonca @Pujan92 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]

@melvin-bot melvin-bot bot added Daily KSv2 Overdue and removed Weekly KSv2 labels Apr 14, 2025
@NicMendonca
Copy link
Contributor

BugZero Checklist:

  • [Contributor] Classify the bug:
Bug classification

Source of bug:

  • 1a. Result of the original design (eg. a case wasn't considered)
  • 1b. Mistake during implementation
  • 1c. Backend bug
  • 1z. Other:

Where bug was reported:

  • 2a. Reported on production (eg. bug slipped through the normal regression and PR testing process on staging)
  • 2b. Reported on staging (eg. found during regression or PR testing)
  • 2d. Reported on a PR
  • 2z. Other:

Who reported the bug:

  • 3a. Expensify user
  • 3b. Expensify employee
  • 3c. Contributor
  • 3d. QA
  • 3z. Other:
  • [Contributor] The offending PR has been commented on, pointing out the bug it caused and why, so the author and reviewers can learn from the mistake.

    Link to comment:

  • [Contributor] If the regression was CRITICAL (e.g. interrupts a core flow) A discussion in #expensify-open-source has been started about whether any other steps should be taken (e.g. updating the PR review checklist) in order to catch this type of bug sooner.

    Link to discussion:

  • [Contributor] If it was decided to create a regression test for the bug, please propose the regression test steps using the template below to ensure the same bug will not reach production again.

Regression Test Proposal Template
  • [BugZero Assignee] Create a GH issue for creating/updating the regression test once above steps have been agreed upon.

    Link to issue:

Regression Test Proposal

Precondition:

Test:

Do we agree 👍 or 👎

@melvin-bot melvin-bot bot removed the Overdue label Apr 14, 2025
@NicMendonca
Copy link
Contributor

@linhvovan29546 you've been paid!

@Pujan92 friendly bump on the checklist!

Copy link

melvin-bot bot commented Apr 18, 2025

@Pujan92 Whoops! This issue is 2 days overdue. Let's get this updated quick!

@melvin-bot melvin-bot bot added the Overdue label Apr 18, 2025
Copy link

melvin-bot bot commented Apr 22, 2025

@Pujan92 Still overdue 6 days?! Let's take care of this!

@Pujan92
Copy link
Contributor

Pujan92 commented Apr 22, 2025

I think we don't need a checklist here as it is an edge case.

Regression Test Proposal

  1. Open app in mweb
  2. Tap on FAB -> Create Expense -> Scan
  3. Tap twice on the choose file icon
  4. Verify it opens only once and won't be shown twice

@melvin-bot melvin-bot bot removed the Overdue label Apr 22, 2025
@NicMendonca
Copy link
Contributor

Payment summary

C+: @Pujan92 - $250 paid via NewDot
Contributor: @linhvovan29546 - $250 paid via Upwork (done)

@garrettmknight
Copy link
Contributor

$250 approved for @Pujan92

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Labels
Awaiting Payment Auto-added when associated PR is deployed to production Bug Something is broken. Auto assigns a BugZero manager. Daily KSv2 External Added to denote the issue can be worked on by a contributor
Projects
None yet
Development

No branches or pull requests

7 participants