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