[HOLD for payment 2024-06-05] [$250] Android - Composer - Draft text reappears after clearing the compose box and navigating back

[lanitochka17]

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: 1.4.69-2
Reproducible in staging?: Y
Reproducible in production?: Y
If this was caught during regression testing, add the test name, ID and link from TestRail: N/A
Issue reported by: Applause - Internal Team

Action Performed:

1. Open Expensify app
2. Open a chat
3. Send a message
4. Type something inside the compose box but don't send it
5. Hold on the sent message on step 3 and tap on reply in thread
6. Tap on the three dot menu and tap on leave
7. Clear the draft text inside the compose box
8. Tap on the device back button

Expected Result:

The compose box doesn't contain any draft text

Actual Result:

The compose box contains the previously cleared draft text

Workaround:

Unknown

Platforms:

Which of our officially supported platforms is this issue occurring on?

• Android: Native
• Android: mWeb Chrome
• iOS: Native
• iOS: mWeb Safari
• MacOS: Chrome / Safari
• MacOS: Desktop

Screenshots/Videos

Add any screenshot/video evidence

Bug6468639_1714636140879.Screen_Recording_20240502_104349_New_Expensify.mp4

View all open jobs on GitHub

Upwork Automation - Do Not Edit

• Upwork Job URL: https://www.upwork.com/jobs/~01321f2f43059fc592
• Upwork Job ID: 1787349096905330688
• Last Price Increase: 2024-05-06
• Automatic offers:
• bernhardoj | Contributor | 0

Issue Owner

Current Issue Owner: @mollfpr

[melvin-bot]

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

[lanitochka17]

@kadiealexander FYI I haven't added the External label as I wasn't 100% sure about this issue. Please take a look and add the label if you agree it's a bug and can be handled by external contributors

[lanitochka17]

We think that this bug might be related to #vip-vsp

[bernhardoj]

Proposal

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

The draft text isn't cleared when we delete the message from another report screen.

What is the root cause of that problem?

When we leave a thread, it will navigate to the most recent report (except the current report).

App/src/libs/actions/Report.ts

Lines 2508 to 2515 in 7483d10

	if (lastAccessedReportID) {
	const lastAccessedReportRoute = ROUTES.REPORT_WITH_ID.getRoute(lastAccessedReportID ?? '');
	// If it is not a chat thread we should call Navigation.goBack to pop the current route first before navigating to last accessed report.
	if (!isChatThread) {
	// Fallback to the lastAccessedReportID route, if this is first route in the navigator
	Navigation.goBack(lastAccessedReportRoute);
	}
	Navigation.navigate(lastAccessedReportRoute, CONST.NAVIGATION.TYPE.FORCED_UP);

So, now there are 2 same reports in the navigation stack. If we clear the composer message from the 2nd report screen and go back, the 1st report screen will still show the composer message. It's because the onyx draft message and the composer message state aren't synchronized.

This doesn't happen on other platforms because we have an effect to sync it.

App/src/pages/home/report/ReportActionCompose/SilentCommentUpdater/index.tsx

Lines 25 to 37 in 7483d10

	useEffect(() => {
	// Value state does not have the same value as comment props when the comment gets changed from another tab.
	// In this case, we should synchronize the value between tabs.
	const shouldSyncComment = prevCommentProp !== comment && value !== comment && !isCommentPendingSaved.current;
	// As the report IDs change, make sure to update the composer comment as we need to make sure
	// we do not show incorrect data in there (ie. draft of message from other report).
	if (preferredLocale === prevPreferredLocale && reportID === prevReportId && !shouldSyncComment) {
	return;
	}
	updateComment(comment ?? '');
	}, [prevCommentProp, prevPreferredLocale, prevReportId, comment, preferredLocale, reportID, updateComment, value, commentRef, isCommentPendingSaved]);

But we don't have it for Android (it was removed in #32799)

App/src/pages/home/report/ReportActionCompose/SilentCommentUpdater/index.android.tsx

Lines 16 to 23 in 7483d10

	function SilentCommentUpdater({comment, updateComment}: SilentCommentUpdaterProps) {
	useEffect(() => {
	updateComment(comment ?? '');
	// eslint-disable-next-line react-hooks/exhaustive-deps -- We need to run this on mount
	}, []);
	return null;
	}

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

We can update the navigate to the most recent report logic to just use goBack with the report screen as the fallback

App/src/libs/actions/Report.ts

Lines 2508 to 2515 in 7483d10

	if (lastAccessedReportID) {
	const lastAccessedReportRoute = ROUTES.REPORT_WITH_ID.getRoute(lastAccessedReportID ?? '');
	// If it is not a chat thread we should call Navigation.goBack to pop the current route first before navigating to last accessed report.
	if (!isChatThread) {
	// Fallback to the lastAccessedReportID route, if this is first route in the navigator
	Navigation.goBack(lastAccessedReportRoute);
	}
	Navigation.navigate(lastAccessedReportRoute, CONST.NAVIGATION.TYPE.FORCED_UP);

Navigation.goBack(lastAccessedReportRoute);

This will make sure we won't have 2 same report screens in the stack, so we don't need to sync the composer message state.

[melvin-bot]

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

[melvin-bot]

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

[kadiealexander]

@mollfpr please review the proposal above, thanks!

[mollfpr]

@bernhardoj I don't understand the changes you suggest, the permalink you attach already uses Navigation.goBack(lastAccessedReportRoute);.

[bernhardoj]

Navigation.goBack(lastAccessedReportRoute); will only be called if it's not a thread, but in our case, we leave a thread.

[melvin-bot]

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

[mollfpr]

The proposal from @bernhardoj makes sense to me and I have tested the solution it's fixed the issue.

🎀 👀 🎀 C+ reviewed!

[melvin-bot]

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

[NikkiWines]

Yep, agreed - thanks for the proposal @bernhardoj 🙇

[melvin-bot]

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

[bernhardoj]

PR is ready

cc: @mollfpr

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

• Navigate back to the last accessed report when leaving a thread #42132

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

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

• @mollfpr requires payment through NewDot Manual Requests
• @bernhardoj requires payment automatic offer (Contributor)

[melvin-bot]

BugZero Checklist: The PR fixing this issue has been merged! The following checklist (instructions) will need to be completed before the issue can be closed:

• [@mollfpr] The PR that introduced the bug has been identified. Link to the PR:
• [@mollfpr] 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:
• [@mollfpr] A discussion in #expensify-bugs 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:
• [@mollfpr] Determine if we should create a regression test for this bug.
• [@mollfpr] If we decide to create a regression test for the bug, please propose the regression test steps to ensure the same bug will not reach production again.
• [@kadiealexander] Link the GH issue for creating/updating the regression test once above steps have been agreed upon:

[kadiealexander]

Payouts due:

• Contributor: $250 @bernhardoj
• Contributor+: $250 @mollfpr

Upwork job is here.

[kadiealexander]

@mollfpr please don't forget about the checklist!

[kadiealexander]

@mollfpr bump!

[mollfpr]

Sorry for the delay 🙏

[@mollfpr] The PR that introduced the bug has been identified. Link to the PR:
[@mollfpr] 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:

I couldn't trace the offending PR.

[@mollfpr] A discussion in #expensify-bugs 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:

The regression step should be enough.

[@mollfpr] Determine if we should create a regression test for this bug.
[@mollfpr] If we decide to create a regression test for the bug, please propose the regression test steps to ensure the same bug will not reach production again.

1. Open any chat
2. Send a message
3. Type a message but don't send it
4. Right-click/long-press the sent message and choose Reply in the thread
5. Press the three-dot in the thread and choose Leave
6. Verify you are navigated to the chat from step 1
   Only for mWeb/iOS/Android
7. Delete the composer message
8. Close the chat
9. Reopen the chat
10. Verify the composer is empty.
11. 👍 or 👎