[Due for payment 2025-06-05] [$250] Reports - Select menu is stretched, no checkbox on selected row when accessed from report RHP

[mitarachim]

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.45-8
Reproducible in staging?: Yes
Reproducible in production?: Yes
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): applausetester+sduisnhdids@applause.expensifail.com
Issue reported by: Applause Internal Team
Device used: Mac 15.3 / Chrome
App Component: Search

Action Performed:

1. Go to staging.new.expensify.com
2. Go to workspace chat.
3. Submit two expenses.
4. Click on the expense preview.
5. Send a message in the expense report.
6. Go to Reports.
7. Go to Chats.
8. Click on the message sent in Step 5.
9. Long click on the expense row in RHP.
10. Click Select.

Expected Result:

• Select menu will not be stretched.
• After selecting the expense, there will be checkbox on the left of the expense rows.

Actual Result:

• Select menu is stretched.
• After selecting the expense, there is no checkbox on the left of the expense rows.

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

Bug6830730_1747215450949.20250514_173319.mp4

View all open jobs on GitHub

Upwork Automation - Do Not Edit

• Upwork Job URL: https://www.upwork.com/jobs/~021924877889596484366
• Upwork Job ID: 1924877889596484366
• Last Price Increase: 2025-05-20

Issue Owner

Current Issue Owner: @bfitzexpensify

[melvin-bot]

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

[bernhardoj]

Proposal

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

We can long press the transaction item and the select modal is shown in full width.

What is the root cause of that problem?

The select menu is shown when we long-press the item and only if it's in a narrow layout.

App/src/components/MoneyRequestReportView/MoneyRequestReportTransactionList.tsx

Lines 253 to 263 in 3e3247f

	onLongPress={() => {
	if (!shouldUseNarrowLayout) {
	return;
	}
	if (selectionMode?.isEnabled) {
	toggleTransaction(transaction.transactionID);
	return;
	}
	setSelectedTransactionID(transaction.transactionID);
	setIsModalVisible(true);
	}}

When we open the report screen in RHP, shouldUseNarrowLayout is true, so the bottom modal is shown, which is unexpected.

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

Instead of using shouldUseNarrowLayout, we should use isSmallScreenWidth, so it's only long-pressable in a small screen width.

onLongPress={() => {
    if (!isSmallScreenWidth) {
        return;
    }

This will align with the checkbox behavior, where we show it in >= medium screen.

App/src/components/MoneyRequestReportView/MoneyRequestReportTransactionList.tsx

Line 271 in 3e3247f

shouldShowCheckbox={!!selectionMode?.isEnabled || isMediumScreenWidth}

So in medium (or bigger) screen, we use a checkbox, while in small screen, we use the long press (and also a checkbox after selecting 1).

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

N/A

[melvin-bot]

@bfitzexpensify Eep! 4 days overdue now. Issues have feelings too...

[melvin-bot]

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

[melvin-bot]

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