[$250] Search - HTML message is displayed different on LHN and on chat preview on search

[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: 9.3.16.0
Reproducible in staging?: Yes
Reproducible in production?: Yes
If this was caught during regression testing, add the test name, ID and link from BrowserStack: #81086
Email or phone of affected tester (no customers): ibellicotest+2250@gmail.com
Issue reported by: Applause Internal Team
Bug source: Pull Request QA execution
Device used: Motorola MotoG60 / Android 12 (Hybrid app) - Windows 11 / Chrome
App Component: Search

Action Performed:

1. Open the Expensify app.
2. Open any chat.
3. Type
   
   test
   
   on compose box and send the message.
4. Long tap on the message and select "Reply in thread"
5. Note that message is shown as user typed it on thread header.
6. Tap on header to access details page.
7. Note that message is displayed as user typed it on details page.
8. Navigate to LHN.
9. Note that message is displayed as in thread header and details page.
10. Tap on the search icon on the top right corner.
11. Note that message only shows the word "Test" on chat preview.

Expected Result:

HTML message should be displayed as user typed it on thread header, details page, LHN and on chat preview on search.

Actual Result:

HTML message is not displayed in the same way on chat preview on search, as it is displayed on LHN, thread header and details page.

Workaround:

Unknown

Platforms:

• Android: App
• Android: mWeb Chrome
• iOS: App
• iOS: mWeb Safari
• iOS: mWeb Chrome
• Windows: Chrome
• MacOS: Chrome / Safari

Screenshots/Videos

Bug7073791_1770741079800.HTML.mp4

View all open jobs on GitHub

Issue Owner

Current Issue Owner: @JS00001

[melvin-bot]

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

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

[melvin-bot]

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

[daledah]

Proposal

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

HTML message is not displayed in the same way on chat preview on search, as it is displayed on LHN, thread header and details page.

What is the root cause of that problem?

The root cause is in the getAlternateText function in src/libs/OptionsListUtils/index.ts. When generating the alternate text for search results, the function calls Parser.htmlToText() on option.lastMessageText which strips HTML formatting and converts it to plain text.

App/src/libs/OptionsListUtils/index.ts

Lines 472 to 475 in 0b62a4e

	const formattedLastMessageText =
	formatReportLastMessageText(Parser.htmlToText(option.lastMessageText ?? '')) ||
	// eslint-disable-next-line @typescript-eslint/no-deprecated
	getLastMessageTextForReport({translate: translateLocal, report, lastActorDetails, isReportArchived, reportAttributesDerived});

However, in the LHN path (SidebarUtils.ts), the getOptionData function uses formatReportLastMessageText() directly without calling Parser.htmlToText() for regular comment messages, which preserves the original text formatting.

App/src/libs/SidebarUtils.ts

Lines 989 to 993 in 0b62a4e

	result.alternateText = getPolicyChangeLogMaxExpenseAgeMessage(translate, lastAction);
	} else if (lastAction?.actionName === CONST.REPORT.ACTIONS.TYPE.POLICY_CHANGE_LOG.UPDATE_DEFAULT_BILLABLE) {
	result.alternateText = getPolicyChangeLogDefaultBillableMessage(translate, lastAction);
	} else if (lastAction?.actionName === CONST.REPORT.ACTIONS.TYPE.POLICY_CHANGE_LOG.UPDATE_DEFAULT_REIMBURSABLE) {
	result.alternateText = getPolicyChangeLogDefaultReimbursableMessage(translate, lastAction);

This inconsistency causes the search chat preview to show different text than the LHN, thread header, and details page. The same ADD_COMMENT rule already exists in SearchAutocompleteList.tsx for the report title (option.text): shouldParserToHTML = reportAction?.actionName !== CONST.REPORT.ACTIONS.TYPE.ADD_COMMENT — we only skip parsing when the action is ADD_COMMENT. We should apply that same rule to the chat preview text in getAlternateText.

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

We should align with the existing logic in SearchAutocompleteList.tsx (lines 853–863): only skip Parser.htmlToText() when the last message is of type ADD_COMMENT, so user-typed text is shown as-is in the chat preview. For all other action types we keep Parser.htmlToText() to strip HTML.

In getAlternateText, use report?.lastActionType === CONST.REPORT.ACTIONS.TYPE.ADD_COMMENT to decide whether to parse. When it is ADD_COMMENT, pass option.lastMessageText directly to formatReportLastMessageText(); otherwise pass Parser.htmlToText(option.lastMessageText ?? '').

--- a/src/libs/OptionsListUtils/index.ts
+++ b/src/libs/OptionsListUtils/index.ts
@@ -468,8 +468,10 @@ function getAlternateText(
     const isExpenseThread = isMoneyRequest(report);
+    const isLastMessageAddComment = report?.lastActionType === CONST.REPORT.ACTIONS.TYPE.ADD_COMMENT;
+    const lastMessageTextToFormat = isLastMessageAddComment ? (option.lastMessageText ?? '') : Parser.htmlToText(option.lastMessageText ?? '');
     const formattedLastMessageText =
-        formatReportLastMessageText(Parser.htmlToText(option.lastMessageText ?? '')) ||
+        formatReportLastMessageText(lastMessageTextToFormat) ||
         // eslint-disable-next-line @typescript-eslint/no-deprecated
         getLastMessageTextForReport({translate: translateLocal, report, lastActorDetails, isReportArchived, currentUserAccountID});
     const reportPrefix = getReportSubtitlePrefix(report);

Or we can use the same logic that we did here

What alternative solutions did you explore? (Optional)

N/A

[twinkle-react]

Proposal

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

The search chat preview shows a plain text version of user-authored HTML hold comments, while the same message renders as HTML in the thread header, report details page, and LHN, which causes inconsistent formatting across views.

What is the root cause of that problem?

In this flow, preview generation converts report-action HTML to plain text too early by using Parser.htmlToText through getReportActionText, which is an incorrect assumption because user-authored comments have canonical HTML that should be the source for all previews, and this early lossy conversion happens before search preview rendering, directly causing inconsistent preview strings.

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

The invariant is that chat preview text for user-authored comments is always derived from the canonical report-action HTML so that compact previews remain consistent with full HTML rendering.

The earliest incorrect assumption is in preview generation, owned by src/libs/OptionsListUtils/index.ts, where preview text relies on option.lastMessageText or direct Parser.htmlToText usage instead of deriving from the report-action HTML.

The fix is to centralize preview derivation in OptionsListUtils by using getReportActionHtml for user-authored comment actions when showChatPreviewLine is enabled, then converting that HTML to text for compact display, while keeping all existing fallback behavior unchanged.

The previous change in PureReportActionItem that rendered HTML directly for hold comments should be reverted so full rendering ownership stays unchanged and only preview generation logic is aligned.

Files changed are limited to two files, with the main logic change in OptionsListUtils and a small revert in PureReportActionItem.

src/libs/OptionsListUtils/index.ts

*** Update File: src/libs/OptionsListUtils/index.ts
@@
-    const formattedLastMessageText =
-        formatReportLastMessageText(Parser.htmlToText(option.lastMessageText ?? '')) ||
-        // eslint-disable-next-line @typescript-eslint/no-deprecated
-        getLastMessageTextForReport({translate: translateLocal, report, lastActorDetails, isReportArchived, reportAttributesDerived});
+    let formattedLastMessageText = '';
+
+    // Prefer rendering the original report action HTML for user-authored comments when showing chat preview lines.
+    // This keeps the preview text consistent with the report/thread/LHN rendering for ADD_COMMENT and HOLD_COMMENT actions.
+    if (showChatPreviewLine && option.reportID) {
+        const lastReportAction = lastVisibleReportActions?.[option.reportID];
+        if (
+            lastReportAction &&
+            (isActionOfType(lastReportAction, CONST.REPORT.ACTIONS.TYPE.ADD_COMMENT) ||
+                lastReportAction.actionName === CONST.REPORT.ACTIONS.TYPE.HOLD_COMMENT)
+        ) {
+            // Use the canonical HTML for the action and convert to text for compact preview rendering.
+            formattedLastMessageText =
+                formatReportLastMessageText(Parser.htmlToText(getReportActionHtml(lastReportAction))) ||
+                // eslint-disable-next-line @typescript-eslint/no-deprecated
+                getLastMessageTextForReport({translate: translateLocal, report, lastActorDetails, isReportArchived, reportAttributesDerived});
+        }
+    }
+
+    // Fallback: existing behavior for non-comment actions or when above yields nothing.
+    if (!formattedLastMessageText) {
+        formattedLastMessageText =
+            formatReportLastMessageText(Parser.htmlToText(option.lastMessageText ?? '')) ||
+            // eslint-disable-next-line @typescript-eslint/no-deprecated
+            getLastMessageTextForReport({translate: translateLocal, report, lastActorDetails, isReportArchived, reportAttributesDerived});
+    }

src/pages/inbox/report/PureReportActionItem.tsx

*** Update File: src/pages/inbox/report/PureReportActionItem.tsx
@@
-        } else if (action.actionName === CONST.REPORT.ACTIONS.TYPE.HOLD_COMMENT) {
-            // Render the original HTML for hold comments so previews (including search) match LHN and report details.
-            // Use RenderHTML to preserve formatting instead of converting to plain text.
-            const holdCommentHtml = getReportActionHtml(action);
-            children = (
-                <ReportActionItemBasicMessage message="">
-                    <RenderHTML html={holdCommentHtml} />
-                </ReportActionItemBasicMessage>
-            );
+        } else if (action.actionName === CONST.REPORT.ACTIONS.TYPE.HOLD_COMMENT) {
+            children = <ReportActionItemBasicMessage message={getReportActionText(action)} />;
         } else if (action.actionName === CONST.REPORT.ACTIONS.TYPE.UNHOLD) {

What alternative solutions did you explore? (Optional)

None

[PiyushChandra17]

Proposal

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

Search - HTML message is displayed different on LHN and on chat preview on search

What is the root cause of that problem?

The root cause is that:

1. We are checking for shouldParserToHTML here

App/src/components/Search/SearchAutocompleteList.tsx

Line 850 in 4147a1d

const shouldParserToHTML = reportAction?.actionName !== CONST.REPORT.ACTIONS.TYPE.ADD_COMMENT;

This is return false since actionName is equivalent to ADDCOMMENT

2. If shouldParserToHTML is true then we parse the HTML to Text via Parser.htmlToText else we show text as it is here,

App/src/components/Search/SearchAutocompleteList.tsx

Line 854 in 4147a1d

text: StringUtils.lineBreaksToSpaces(shouldParserToHTML ? Parser.htmlToText(option.text ?? '') : (option.text ?? '')),

3. Now the alternateText is already assumed to be parsed > we get normal alternateText value not with HTML tag

4. HTML message is displayed the same for LHN, thread header and details page because it's being correctly handled

Correctly handled alternateText on LHN optionRowList

App/src/components/LHNOptionsList/OptionRowLHN.tsx

Lines 175 to 176 in 04c98c9

	// This is used to ensure that we display the text exactly as the user entered it when displaying LHN title, instead of parsing their text to HTML.
	const shouldParseFullTitle = optionItem?.parentReportAction?.actionName !== CONST.REPORT.ACTIONS.TYPE.ADD_COMMENT && !isGroupChat(report);

App/src/components/LHNOptionsList/OptionRowLHN.tsx

Lines 307 to 324 in 04c98c9

	{!!optionItem.alternateText && (
	<Text
	style={alternateTextStyle}
	numberOfLines={1}
	accessibilityLabel={translate('accessibilityHints.lastChatMessagePreview')}
	fsClass={alternateTextFSClass}
	>
	{alternateTextContainsCustomEmojiWithText ? (
	<TextWithEmojiFragment
	message={optionItem.alternateText}
	style={[alternateTextStyle, styles.mh0]}
	alignCustomEmoji
	/>
	) : (
	optionItem.alternateText
	)}
	</Text>
	)}

App/src/components/Search/SearchRouter/SearchRouter.tsx

Lines 147 to 155 in 04c98c9

	data: [
	{
	text: StringUtils.lineBreaksToSpaces(
	`${translate('search.searchIn')} ${
	shouldParserToHTML
	? Parser.htmlToText(reportForContextualSearch.text ?? reportForContextualSearch.alternateText ?? '')
	: (reportForContextualSearch.text ?? reportForContextualSearch.alternateText ?? '')
	}`,
	),

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

1. We need to show option.lastMessageText as alternateText on search in order to show the HTML tag as it is > currently it's being parsed from HTML to text

2. Updated code:

const styledRecentReports = useMemo(
() =>
    recentReportsOptions.map((option) => {
        const report = getReportOrDraftReport(option.reportID);
        const reportAction = getReportAction(report?.parentReportID, report?.parentReportActionID);
        const shouldParserToHTML = reportAction?.actionName !== CONST.REPORT.ACTIONS.TYPE.ADD_COMMENT;

        console.log(reportAction);

        return {
            ...option,
            pressableStyle: styles.br2,
            text: StringUtils.lineBreaksToSpaces(shouldParserToHTML ? Parser.htmlToText(option.text ?? '') : (option.text ?? '')),
            alternateText: option.lastMessageText ?? '', // Add this
            wrapperStyle: [styles.pr3, styles.pl3],
        };
    }),
[recentReportsOptions, styles.br2, styles.pr3, styles.pl3],
);

What alternative solutions did you explore? (Optional)

OR we should pass alternateText as StringUtils.lineBreaksToSpaces(!shouldParserToHTML ? Parser.htmlToText(option.lastMessageText ?? '') : (option.lastMessageText ?? '')), > Follow the same pattern as we do for text just the flip shouldParserToHTML condition:

const styledRecentReports = useMemo(
      () =>
          recentReportsOptions.map((option) => {
              const report = getReportOrDraftReport(option.reportID);
              const reportAction = getReportAction(report?.parentReportID, report?.parentReportActionID);
              const shouldParserToHTML = reportAction?.actionName !== CONST.REPORT.ACTIONS.TYPE.ADD_COMMENT;

              return {
                  ...option,
                  pressableStyle: styles.br2,
                  text: StringUtils.lineBreaksToSpaces(shouldParserToHTML ? Parser.htmlToText(option.text ?? '') : (option.text ?? '')),
                  alternateText: StringUtils.lineBreaksToSpaces(!shouldParserToHTML ? Parser.htmlToText(option.lastMessageText ?? '') : (option.lastMessageText ?? '')), // Add this
                  wrapperStyle: [styles.pr3, styles.pl3],
              };
          }),
      [recentReportsOptions, styles.br2, styles.pr3, styles.pl3],
  );

Result:

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.

[github-actions]

⚠️ @PiyushChandra17 Your proposal is a duplicate of an already existing proposal and has been automatically withdrawn to prevent spam. Please review the existing proposals before submitting a new one.