[Due for payment 2025-10-21] [$250] Report - "New Messages" badge appears briefly on report with new system messages

[jponikarchuk]

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.2.24-1
Reproducible in staging?: Yes
Reproducible in production?: Yes
If this was caught during regression testing, add the test name, ID and link from TestRail: https://test-management.browserstack.com/projects/2219752/test-runs/TR-1160/folder/13176910/41237479/936933725
Email or phone of affected tester (no customers): ibellicotest+1896@gmail.com
Issue reported by: Applause Internal Team
Device used: Motorola MotoG60 / Android 12 / Chrome ( mWeb)
App Component: Money Requests

Action Performed:

Prerequisite: Account has at least one workspace.

1. Open the staging.new.expensify.com website.
2. Navigate to workspace chat.
3. Create a manual expense.
4. Long tap on the expense preview and hold the expense.
5. Long tap on preview again, and remove hold from expense.
6. Open the report.
7. Note that "New Messages" badge appears briefly on top of report.
8. Scroll to the bottom of the report and return to the top.
9. Note that now, badge remains displayed.

Expected Result:

"New Messages" badge on transaction thread, should remain displayed when the new messages are not visible.

Actual Result:

"New Messages" badge on transaction thread, only appears briefly when there are new system messages on report. Badge only remain displayed after scrolling to the bottom of report and returning to the top.

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

11.mp4

View all open jobs on GitHub

Upwork Automation - Do Not Edit

• Upwork Job URL: https://www.upwork.com/jobs/~021975571349168699803
• Upwork Job ID: 1975571349168699803
• Last Price Increase: 2025-10-07
• Automatic offers:
• nkdengineer | Contributor | 109079975

Issue Owner

Current Issue Owner: @

Issue Owner

Current Issue Owner: @joekaufmanexpensify

[melvin-bot]

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

[nkdengineer]

Proposal

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

"New Messages" badge on transaction thread, only appears briefly when there are new system messages on report. Badge only remain displayed after scrolling to the bottom of report and returning to the top.

What is the root cause of that problem?

when users hold/unhold the request, we'll add the new system messages in the transaction report, users haven't seen this message yet so when they go to the transaction report, isFloatingMessageCounterVisible will be true

and we also have the logic to set it to false when the page is mounted in

App/src/pages/home/report/ReportActionsList.tsx

Line 406 in 1ff696b

setIsFloatingMessageCounterVisible(false);

so the New messages badge disappear

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

setIsFloatingMessageCounterVisible(false) should be called along with reportScrollManager.scrollToBottom(); like what we did in

App/src/pages/home/report/ReportActionsList.tsx

Lines 455 to 456 in 1ff696b

	setIsFloatingMessageCounterVisible(false);
	reportScrollManager.scrollToBottom();

App/src/pages/home/report/ReportActionsList.tsx

Lines 462 to 463 in 1ff696b

	setIsFloatingMessageCounterVisible(false);
	reportScrollManager.scrollToBottom();

and other places, so we should move

App/src/pages/home/report/ReportActionsList.tsx

Line 406 in 1ff696b

setIsFloatingMessageCounterVisible(false);

to

App/src/pages/home/report/ReportActionsList.tsx

Line 408 in 1ff696b

if (!shouldScrollToEndAfterLayout) {

if (!shouldScrollToEndAfterLayout) {
                setIsFloatingMessageCounterVisible(false);
                reportScrollManager.scrollToBottom();
            }

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.

[melvin-bot]

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

[melvin-bot]

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

[dmkt9]

Proposal

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

"New Messages" badge on transaction thread, only appears briefly when there are new system messages on report. Badge only remain displayed after scrolling to the bottom of report and returning to the top.

What is the root cause of that problem?

1. Since ReportActionsList is now rendered at the top when isTransactionThreadReport or isMoneyRequestOrInvoiceReport is true:
   

   App/src/pages/home/report/ReportActionsList.tsx

   Line 806 in 6ea9c3f

   {shouldScrollToEndAfterLayout && topReportAction ? renderTopReportActions() : undefined}

2. By default, the list is rendered at the bottom, so the "New messages" badge will be manually disabled here:
   

   App/src/pages/home/report/ReportActionsList.tsx

   Lines 405 to 411 in 6ea9c3f

   	InteractionManager.runAfterInteractions(() => {
   	setIsFloatingMessageCounterVisible(false);
   	if (!shouldScrollToEndAfterLayout) {
   	reportScrollManager.scrollToBottom();
   	}
   	});

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

• If FlatList is rendered at the top, we don’t need to manually disable the "New messages" badge
• If FlatList is rendered at the bottom, the "New messages" badge is never enabled
  Therefore, we should remove this useEffect:
  

  App/src/pages/home/report/ReportActionsList.tsx

  Lines 399 to 413 in 6ea9c3f

  	useEffect(() => {
  	if (linkedReportActionID) {
  	return;
  	}
  	// eslint-disable-next-line deprecation/deprecation
  	InteractionManager.runAfterInteractions(() => {
  	setIsFloatingMessageCounterVisible(false);
  	if (!shouldScrollToEndAfterLayout) {
  	reportScrollManager.scrollToBottom();
  	}
  	});
  	// eslint-disable-next-line react-compiler/react-compiler, react-hooks/exhaustive-deps
  	}, []);

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

NA

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.