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

[mitarachim]

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 Owner

Current Issue Owner: @Pujan92

[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.

[linhvovan29546]

🚨 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

App/src/components/AttachmentPicker/index.tsx

Lines 104 to 110 in 8c827d7

	{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:

App/src/components/AttachmentPicker/index.tsx

Line 46 in 8c827d7

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

2. 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;
                },
            })}

3. 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]

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

App/src/pages/iou/request/step/IOURequestStepScan/index.tsx

Lines 774 to 778 in dc8eb79

	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

App/src/pages/iou/request/step/IOURequestStepScan/index.tsx

Lines 774 to 778 in dc8eb79

	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.

[melvin-bot]

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

[melvin-bot]

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

[Pujan92]

@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

[melvin-bot]

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

[melvin-bot]

📣 @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]

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

[melvin-bot]

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:

• fix: mweb attachment picker shown twice #59319

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

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

• @Pujan92 requires payment through NewDot Manual Requests
• @linhvovan29546 requires payment automatic offer (Contributor)

[melvin-bot]

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

[NicMendonca]

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 👎

[NicMendonca]

@linhvovan29546 you've been paid!

@Pujan92 friendly bump on the checklist!

[melvin-bot]

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

[melvin-bot]

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

[Pujan92]

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

[NicMendonca]

Payment summary

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

[garrettmknight]

$250 approved for @Pujan92