[Due for payment 2025-06-05] [$250] Expense Reports - Arrow is shown next to submitter on the empty report when receiver is empty

[jponikarchuk]

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.49-4
Reproducible in staging?: Yes
Reproducible in production?: No
If this was caught during regression testing, add the test name, ID and link from TestRail: Exp
Email or phone of affected tester (no customers): [email protected]
Issue reported by: Applause Internal Team
Device used: iPhone 15 Pro Max / iOS 18.4
App Component: Search

Action Performed:

Precondition:

• Log in with Expensifail account.

1. Launch Expensify app.
2. Go to workspace chat.
3. Create an expense in the workspace chat.
4. Create an empty report via + > Create report in the workspace chat.
5. Go to Reports.
6. Tap bookmark icon.
7. Go to Expense Reports.

Expected Result:

There will be no arrow icon next to the submitter on the empty report when receiver is empty.

Actual Result:

There is an arrow icon next to the submitter on the empty report when receiver is empty.

Workaround:

Unknown

Platforms:

• Android: App
• Android: mWeb Chrome
• iOS: App
• iOS: mWeb Safari
• iOS: mWeb Chrome
• Windows: Chrome
• MacOS: Chrome / Safari
• MacOS: Desktop

Screenshots/Videos

1.mp4

View all open jobs on GitHub

Upwork Automation - Do Not Edit

• Upwork Job URL: https://www.upwork.com/jobs/~021925529871486693749
• Upwork Job ID: 1925529871486693749
• Last Price Increase: 2025-05-22
• Automatic offers:
• ikevin127 | Contributor | 107420581
• linhvovan29546 | Contributor | 107420640

Issue Owner

Current Issue Owner: @zanyrenney

[melvin-bot]

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

[melvin-bot]

Triggered auto assignment to @Gonals (DeployBlockerCash), see https://stackoverflowteams.com/c/expensify/questions/9980/ for more details.

[melvin-bot]

💬 A slack conversation has been started in #expensify-open-source

[github-actions]

👋 Friendly reminder that deploy blockers are time-sensitive ⏱ issues! Check out the open `StagingDeployCash` deploy checklist to see the list of PRs included in this release, then work quickly to do one of the following:

1. Identify the pull request that introduced this issue and revert it.
2. Find someone who can quickly fix the issue.
3. Fix the issue yourself.

[nabi-ebrahimi]

🚨 Edited by proposal-police: This proposal was edited at 2025-05-22 06:32:27 UTC.

Proposal

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

Expense Reports - Arrow is shown next to submitter on the empty report when receiver is empty

What is the root cause of that problem?

We are rendering the arrow icon even when ToRecipient is not supposed to be displayed. here

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

We can check whether ToRecipient and the ToRecipient's account exist and are going to be rendered, and only then display the arrow.

   {shouldDisplayArrowIcon && shouldShowToRecipient && !!participantTo.accountID && !!isCorrectSearchUserName(participantToDisplayName) && (
                <Icon
                    src={Expensicons.ArrowRightLong}
                    width={variables.iconSizeXXSmall}
                    height={variables.iconSizeXXSmall}
                    fill={theme.icon}
                />
            )}

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)

Or we can check every case here.

We can check the accountIDs and correctDisplay names. instead of UserInfoCell component here

 const showArrowComponent = (reportItem.type === CONST.REPORT.TYPE.IOU && thereIsFromAndTo) || (reportItem.type === CONST.REPORT.TYPE.EXPENSE && !!reportItem?.from);
    const shouldShowToRecipient = useMemo(
        () => thereIsFromAndTo && reportItem?.from?.accountID !== reportItem?.to?.accountID,
        [thereIsFromAndTo, reportItem?.from?.accountID, reportItem?.to?.accountID],
    );

[nabi-ebrahimi]

This proposal screenshot.

[melvin-bot]

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

[melvin-bot]

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

[Gonals]

I don't think we need to block on this

[nkdengineer]

Proposal

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

There is an arrow icon next to the submitter on the empty report when receiver is empty.

What is the root cause of that problem?

The arrow icon is shown if shouldShowToRecipient is true but in the case the to field is empty personal detail, we don't show anything for to field although shouldShowToRecipient is true.

App/src/components/SelectionList/Search/ReportListItemHeader.tsx

Line 220 in 31336b4

shouldDisplayArrowIcon={shouldShowToRecipient}

App/src/components/SelectionList/Search/ReportListItemHeader.tsx

Lines 184 to 187 in 31336b4

	const shouldShowToRecipient = useMemo(
	() => thereIsFromAndTo && reportItem?.from?.accountID !== reportItem?.to?.accountID,
	[thereIsFromAndTo, reportItem?.from?.accountID, reportItem?.to?.accountID],
	);

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

We should update the condition to show the to field with additional check it's not empty personal or not

const shouldShowToRecipient = useMemo(
    () => thereIsFromAndTo && reportItem?.from?.accountID !== reportItem?.to?.accountID && reportItem?.to?.accountID !== CONST.REPORT.OWNER_ACCOUNT_ID_FAKE,
    [thereIsFromAndTo, reportItem?.from?.accountID, reportItem?.to?.accountID],
);

App/src/components/SelectionList/Search/ReportListItemHeader.tsx

Lines 184 to 187 in 31336b4

	const shouldShowToRecipient = useMemo(
	() => thereIsFromAndTo && reportItem?.from?.accountID !== reportItem?.to?.accountID,
	[thereIsFromAndTo, reportItem?.from?.accountID, reportItem?.to?.accountID],
	);

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)

NA

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.

[zanyrenney]

Nice, @ishpaul777
Please can you review the proposal above and let me know if we can move forward and sign this contributor to the issue?

[ikevin127]

@zanyrenney The offending PR is #62288 which was just deployed to staging ~14h ago, meaning the author @linhvovan29546 will open a follow-up PR since one was already expected, the PR is expected to fix this issue as well once merged.

I'll take over as C+ here since the regression is on us 👍

[melvin-bot]

📣 @ikevin127 🎉 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 📖

[mountiny]

@linhvovan29546 can you comment please

[linhvovan29546]

Hi, sorry everyone I’ll follow up on this issue

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

[linhvovan29546]

I can’t reproduce this on main or staging now. It looks like we’re hiding the empty report. @ikevin127 Are you able to reproduce it? Should we still apply the fix to prevent this bug in the future?
Never mind, I’ll still apply the fix since it’s included in the unit test.

[ikevin127]

@ikevin127 Are you able to reproduce it?

Yes, I can consistently reproduce following OP steps with a private domain email (used https://temp-mail.org) on narrow layout devices / resizing web, since only on narrow we show the UserInfoCellsWithArrow component:

♻ Reviewing the PR...

[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.53-7 and is now subject to a 7-day regression period 📆. Here is the list of pull requests that resolve this issue:

• fix: hide arrow icon if to recipient is invalid #62732

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

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

• @ikevin127 requires payment automatic offer (Contributor)
• @linhvovan29546 requires payment automatic offer (Contributor)

[melvin-bot]

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

[ikevin127]

@zanyrenney This issue can be closed as completed since it was a regression coming from this issue's PR, payment will be handled there.