[Due for payment 2025-05-08] [$250] expense-In confirmation page, description saved as <> is not shown on reopening

[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: V9.1.26-0
Reproducible in staging?: Yes
Reproducible in production?: Yes
If this was caught on HybridApp, is this reproducible on New Expensify Standalone?: No, reproducible on hybrid only
If this was caught during regression testing, add the test name, ID and link from TestRail: N
Email or phone of affected tester (no customers): Slottwo1 q@gmail.com
Issue reported by: Applause Internal Team
Device used: Redminote 10s android 13
App Component: Money Requests

Action Performed:

1. Launch app
2. Open a workspace chat
3. Try to create a manual expense
4. In the flow, in confirmation page, enter description as <> , then save
5. Open the saved description field
6. Note description field is shown empty
7. Complete the flow
8. Open the expense
9. Tap description
10. Note description saved is shown

Expected Result:

In confirmation page, description saved as <> is must be shown on reopening.

Actual Result:

In confirmation page, description saved as <> is not shown on reopening.

Workaround:

Unknown

Platforms:

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

Screenshots/Videos

Bug6797773_1744254731986.Screenrecorder-2025-04-10-08-36-12-128.mp4

View all open jobs on GitHub

Upwork Automation - Do Not Edit

• Upwork Job URL: https://www.upwork.com/jobs/~021913077662245991787
• Upwork Job ID: 1913077662245991787
• Last Price Increase: 2025-04-18
• Automatic offers:
• daledah | Contributor | 107045814

Issue Owner

Current Issue Owner: @miljakljajic

[melvin-bot]

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

[daledah]

Proposal

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

In confirmation page, description saved as <> is not shown on reopening.

What is the root cause of that problem?

When creating a new expense, we save description directly into transactionDraft without any formatting:

App/src/libs/actions/IOU.ts

Lines 894 to 896 in 912b436

	function setMoneyRequestDescription(transactionID: string, comment: string, isDraft: boolean) {
	Onyx.merge(`${isDraft ? ONYXKEYS.COLLECTION.TRANSACTION_DRAFT : ONYXKEYS.COLLECTION.TRANSACTION}${transactionID}`, {comment: {comment: comment.trim()}});
	}

So the comment in this case has the markdown format.

After submitting expense, BE returns comment as html string:

In here:

App/src/pages/iou/request/step/IOURequestStepDescription.tsx

Lines 68 to 70 in 912b436

	const currentDescriptionInMarkdown = Parser.htmlToMarkdown(
	isEditingSplitBill && !lodashIsEmpty(splitDraftTransaction) ? splitDraftTransaction?.comment?.comment ?? '' : transaction?.comment?.comment ?? '',
	);

We always process transaction comment using Parser.htmlToMarkdown, regardless of actions/format. So in create expense flow, if description is a tag <>, it will be stripped to empty string.

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

We should process currentDescriptionInMarkdown differently based on action type, return unformatted comment if it creation flow

App/src/pages/iou/request/step/IOURequestStepDescription.tsx

Lines 68 to 70 in 912b436

	const currentDescriptionInMarkdown = Parser.htmlToMarkdown(
	isEditingSplitBill && !lodashIsEmpty(splitDraftTransaction) ? splitDraftTransaction?.comment?.comment ?? '' : transaction?.comment?.comment ?? '',
	);

const isEditAction = action === CONST.IOU.ACTION.EDIT;
const currentDescriptionInMarkdown = useMemo(() => {
	if (isEditAction) {
		return Parser.htmlToMarkdown(
			isEditingSplitBill && !lodashIsEmpty(splitDraftTransaction)
				? splitDraftTransaction?.comment?.comment ?? ''
				: transaction?.comment?.comment ?? ''
		)
	}
	return isEditingSplitBill && !lodashIsEmpty(splitDraftTransaction)
		? splitDraftTransaction?.comment?.comment ?? ''
		: transaction?.comment?.comment ?? ''
}, [isEditAction, isEditingSplitBill, splitDraftTransaction, transaction?.comment?.comment])

Screen.Recording.2025-04-10.at.12.22.51.mov

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

No need.

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.

[bernhardoj]

🚨 Edited by proposal-police: This proposal was edited at 2025-04-10 05:32:23 UTC.

Proposal

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

In confirm page, entering <> as description and then reoping it shows empty value.

What is the root cause of that problem?

When we open the description page, we always convert the description from HTML to markdown.

App/src/pages/iou/request/step/IOURequestStepDescription.tsx

Lines 68 to 70 in 912b436

	const currentDescriptionInMarkdown = Parser.htmlToMarkdown(
	isEditingSplitBill && !lodashIsEmpty(splitDraftTransaction) ? splitDraftTransaction?.comment?.comment ?? '' : transaction?.comment?.comment ?? '',
	);

This is useful when we want to edit the description after submitting it, because the description is in HTML tag, for example, if we submit the description as *b*, then the HTML is <strong>b</strong>. So, converting it back to markdown make sense. However, when we are creating a new money request, the description is saved as is on the transaction draft. So, converting <> to markdown becomes empty.

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

We have 2 options. First, ass shouldUseTransactionDraftdown fromWithFullTransactionOrNotFound` HOC and if it's true, we just display the description as it is.

Second option, save the description as HTML to the draft data.

setMoneyRequestDescription(transaction?.transactionID, getParsedComment(newComment), isTransactionDraft);

App/src/pages/iou/request/step/IOURequestStepDescription.tsx

Lines 116 to 130 in 912b436

	// In the split flow, when editing we use SPLIT_TRANSACTION_DRAFT to save draft value
	if (isEditingSplitBill) {
	setDraftSplitTransaction(transaction?.transactionID, {comment: newComment});
	navigateBack();
	return;
	}
	const isTransactionDraft = shouldUseTransactionDraft(action);
	setMoneyRequestDescription(transaction?.transactionID, newComment, isTransactionDraft);
	if (action === CONST.IOU.ACTION.EDIT) {
	updateMoneyRequestDescription(transaction?.transactionID, reportID, newComment, policy, policyTags, policyCategories);
	}
	navigateBack();

Then, we need to make some adjustments such as replacing shouldParseTitle to shouldRenderAsHTML because it's now an HTML,

App/src/components/MoneyRequestConfirmationListFooter.tsx

Lines 360 to 363 in 912b436

	<MentionReportContext.Provider value={mentionReportContextValue}>
	<MenuItemWithTopDescription
	shouldShowRightIcon={!isReadOnly}
	shouldParseTitle

removing parsing the description when submitting the request (because we already did it),

App/src/libs/actions/IOU.ts

Lines 4838 to 4841 in 912b436

	function requestMoney(requestMoneyInformation: RequestMoneyInformation) {
	const {report, participantParams, policyParams = {}, transactionParams, gpsPoints, action, reimbursible} = requestMoneyInformation;
	const {payeeAccountID} = participantParams;
	const parsedComment = getParsedComment(transactionParams.comment ?? '');

etc.

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

If we go with the first option, we can render the description page, with the action CREATE and EDIT and make sure if CREATE, the description isn't parsed to markdown, but if it's EDIT, it's parsed to markdown. If we go with the 2nd option, we can render the description page, submit the description, and make sure the draft description is in HTML tag.

[melvin-bot]

@miljakljajic 6 days overdue. This is scarier than being forced to listen to Vogon poetry!

[melvin-bot]

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

[melvin-bot]

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