[Due for payment 2025-04-08] [$250] Expense - Receipt 3-dot menu does not appear under the 3-dot button

[IuliiaHerets]

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.19-0
Reproducible in staging?: Yes
Reproducible in production?: No
If this was caught on HybridApp, is this reproducible on New Expensify Standalone?: Yes, reproducible on both
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: Mac 15.3 / Chrome
App Component: Money Requests

Action Performed:

1. Go to staging.new.expensify.com
2. Go to workspace chat.
3. Submit a manual expense with receipt.
4. Go to transaction thread.
5. Click on the receipt.
6. Click 3-dot button.

Expected Result:

3-dot menu will appear under the 3-dot button.

Actual Result:

3-dot menu does not appear under the 3-dot button.

Workaround:

Unknown

Platforms:

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

Screenshots/Videos

Bug6782424_1742971918699.20250326_135242.mp4

View all open jobs on GitHub

Upwork Automation - Do Not Edit

• Upwork Job URL: https://www.upwork.com/jobs/~021904835134337582664
• Upwork Job ID: 1904835134337582664
• Last Price Increase: 2025-03-26
• Automatic offers:
• brunovjk | Reviewer | 106673718

Issue Owner

Current Issue Owner: @dylanexpensify

[melvin-bot]

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

[melvin-bot]

Triggered auto assignment to @dylanexpensify (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]

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

[cristipaval]

@IuliiaHerets, I'm not sure I understand the issue here. In the screen recording, I see that the difference between staging and prod is that in staging, there's an extra option, Delete receipt, in the 3-dot menu.

[daledah]

Proposal

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

3-dot menu does not appear under the 3-dot button.

What is the root cause of that problem?

This comes from #59058

anchorAlignment added here:

App/src/components/HeaderWithBackButton/index.tsx

Line 249 in 58b8887

anchorAlignment={threeDotsAnchorAlignment}

with horizontal prop being right

App/src/components/HeaderWithBackButton/index.tsx

Line 59 in 58b8887

horizontal: CONST.MODAL.ANCHOR_ORIGIN_HORIZONTAL.RIGHT,

Instead of default left in ThreedotsMenu`

App/src/components/ThreeDotsMenu/index.tsx

Lines 28 to 31 in 58b8887

	anchorAlignment = {
	horizontal: CONST.MODAL.ANCHOR_ORIGIN_HORIZONTAL.LEFT,
	vertical: CONST.MODAL.ANCHOR_ORIGIN_VERTICAL.TOP, // we assume that popover menu opens below the button, anchor is at TOP
	},

So the calculation of left style is changed

App/src/components/PopoverWithMeasuredContent.tsx

Lines 90 to 102 in 58b8887

	switch (anchorAlignment.horizontal) {
	case CONST.MODAL.ANCHOR_ORIGIN_HORIZONTAL.RIGHT:
	horizontalConstraint = {left: anchorPosition.horizontal - popoverWidth};
	break;
	case CONST.MODAL.ANCHOR_ORIGIN_HORIZONTAL.CENTER:
	horizontalConstraint = {
	left: Math.floor(anchorPosition.horizontal - popoverWidth / 2),
	};
	break;
	case CONST.MODAL.ANCHOR_ORIGIN_HORIZONTAL.LEFT:
	default:
	horizontalConstraint = {left: anchorPosition.horizontal};
	}

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

We can change the value here in styles.threeDotsPopoverOffsetAttachmentModal to make it appear correctly under 3 dot button

App/src/styles/index.ts

Lines 3810 to 3814 in 58b8887

	threeDotsPopoverOffsetAttachmentModal: (windowWidth: number) =>
	({
	...getPopOverVerticalOffset(80),
	horizontal: windowWidth - 140,
	} satisfies AnchorPosition),

Example when changed value to 70:

Or we can pass threeDotsAnchorAlignment with values from ThreedotsMenu (left and top) from AttachmentModal to HeaderWithBackButton to be same as production behaviour

IMO First solution looks better because the modal appears exactly below the three dots menu.

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)

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.

[daledah]

@cristipaval The bug is the misalignment of the modal, like explained in my proposal above.

[daledah]

@robertjchen I can help raise a quick fix if needed.

[melvin-bot]

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

[melvin-bot]

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

[cristipaval]

Ah, I see it is a minor UI thing. I think it is NAB so I'll demote it and ask the author of the offending PR to fix it.

[melvin-bot]

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

Offer link
Upwork job

[blazejkustra]

Update: I just raised a PR, @brunovjk will review it as a C+ 🥇

[melvin-bot]

⚠️ Looks like this issue was linked to a Deploy Blocker here

If you are the assigned CME please investigate whether the linked PR caused a regression and leave a comment with the results.

If a regression has occurred and you are the assigned CM follow the instructions here.

If this regression could have been avoided please consider also proposing a recommendation to the PR checklist so that we can avoid it in the future.

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

• Fix auto focus after side pane is closed, fix popover position on attachment modal #59156

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

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

• @blazejkustra does not require payment (Contractor)
• @brunovjk requires payment automatic offer (Reviewer)

[melvin-bot]

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

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

[dylanexpensify]

Hi @JmillsExpensify, I'll be OOO during this time! Would you mind finishing the payment here when due?? TY! 🙇‍♂

[brunovjk]

Payment and BZ checklist will be handled here, We can wait the 7 days for regression and close it here. Thanks.

[robertjchen]

waiting out regression period

[JmillsExpensify]

Payment summary: $250 to @brunovjk for PR review and testing.

[JmillsExpensify]

I went ahead and paid you out for this issue, and then saw this comment, so please make sure you deduct that from the total in that issue.

[brunovjk]

Sure @JmillsExpensify, leave it to me, aí will do it l. Thanks