[Due for payment 2025-08-15] [Due for payment 2025-08-13] [$250] Expense - Report field shows a broken icon instead of the custom global create emoji

[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: 9.1.82-2
Reproducible in staging?: Yes
Reproducible in production?: Yes
If this was caught during regression testing, add the test name, ID and link from TestRail: #59301
Email or phone of affected tester (no customers): applausetester+kakakaka5@applause.expensifail.com
Issue reported by: Applause Internal Team
Device used: Mac 15.5 / Chrome
App Component: Money Requests

Action Performed:

1. Go to staging.expensify.com
2. Go to workspace chat.
3. Type :global
4. Select global_create emoji.
5. Copy the emoji.
6. Submit an expense in the workspace chat.
7. Open the expense report.
8. Click report header > Title.
9. Paste the custom emoji in the report title and save it.

Expected Result:

Report field will show the custom global create emoji.

Actual Result:

Report field shows a broken icon instead of the custom global create emoji.

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

Bug6890252_1752740695478.20250717_162153.mp4

View all open jobs on GitHub

Upwork Automation - Do Not Edit

• Upwork Job URL: https://www.upwork.com/jobs/~021946226091102386118
• Upwork Job ID: 1946226091102386118
• Last Price Increase: 2025-07-18

Issue Owner

Current Issue Owner: @bfitzexpensify

[melvin-bot]

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

Report field shows a broken icon instead of the custom global create emoji.

What is the root cause of that problem?

With the custom emoji we saved like this

And in MoneyRequestView we are using shouldRenderAsHTML to render this icon

App/src/components/ReportActionItem/MoneyRequestView.tsx

Lines 845 to 863 in 538e440

	<OfflineWithFeedback pendingAction={getPendingFieldAction('reportID')}>
	<MenuItemWithTopDescription
	shouldShowRightIcon={canEditReport}
	title={getReportName(parentReport) || parentReport?.reportName}
	description={translate('common.report')}
	style={[styles.moneyRequestMenuItem]}
	titleStyle={styles.flex1}
	onPress={() => {
	if (!canEditReport || !report?.reportID || !transaction?.transactionID) {
	return;
	}
	Navigation.navigate(
	ROUTES.MONEY_REQUEST_STEP_REPORT.getRoute(CONST.IOU.ACTION.EDIT, iouType, transaction?.transactionID, report.reportID, getReportRHPActiveRoute()),
	);
	}}
	interactive={canEditReport}
	shouldRenderAsHTML
	/>
	</OfflineWithFeedback>

App/src/components/MenuItem.tsx

Lines 842 to 846 in 538e440

	{!!title && (shouldRenderAsHTML || (shouldParseTitle && !!html.length)) && (
	<View style={styles.renderHTMLTitle}>
	<RenderHTML html={processedTitle} />
	</View>
	)}

It leads to a broken icon is displayed

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

We notice that in the step report, the icon is still showing normally.

Because we using normal text to render here without render as html

App/src/components/SelectionList/InviteMemberListItem.tsx

Lines 135 to 145 in 538e440

	<TextWithTooltip
	shouldShowTooltip={showTooltip}
	text={Str.removeSMSDomain(item.text ?? '')}
	style={[
	styles.optionDisplayName,
	isFocused ? styles.sidebarLinkActiveText : styles.sidebarLinkText,
	item.isBold !== false && styles.sidebarLinkTextBold,
	styles.pre,
	item.alternateText ? styles.mb1 : null,
	]}
	/>

So i think this is fine if we remove shouldRenderAsHTML props here

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)

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.

[drminh2807]

Proposal

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

Expense - Report field shows a broken icon instead of the custom global create emoji

What is the root cause of that problem?

We render as html report name here

App/src/components/ReportActionItem/MoneyRequestView.tsx

Line 861 in 418a4f2

shouldRenderAsHTML

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

I think we should disable shouldRenderAsHTML but need parse html to text

App/src/components/ReportActionItem/MoneyRequestView.tsx

Line 848 in 418a4f2

title={getReportName(parentReport) || parentReport?.reportName}

        title={Parser.htmlToText(getReportName(parentReport) || (parentReport?.reportName ?? ''))}

like we did in ReportDetailsPage

App/src/pages/ReportDetailsPage.tsx

Line 318 in 418a4f2

const reportName = Parser.htmlToText(getReportName(report));

App/src/pages/ReportDetailsPage.tsx

Lines 739 to 755 in 418a4f2

	<MenuItemWithTopDescription
	shouldShowRightIcon={!isFieldDisabled}
	interactive={!isFieldDisabled}
	title={reportName}
	titleStyle={styles.newKansasLarge}
	shouldCheckActionAllowedOnPress={false}
	description={Str.UCFirst(titleField.name)}
	onPress={() => {
	let policyID = report.policyID;
	if (!policyID) {
	policyID = '';
	}
	Navigation.navigate(ROUTES.EDIT_REPORT_FIELD_REQUEST.getRoute(report.reportID, policyID, titleField.fieldID, backTo));
	}}
	furtherDetailsComponent={nameSectionFurtherDetailsContent}

Result

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

N/A

What alternative solutions did you explore? (Optional)

N/A

[dmkt9]

Proposal

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

Report field shows a broken icon instead of the custom global create emoji

What is the root cause of that problem?

1. Because the report title is rendered as HTML:
   

   App/src/components/ReportActionItem/MoneyRequestView.tsx

   Line 861 in 538e440

   shouldRenderAsHTML

2. However, since it consists of only plain Unicode characters, the browser can’t find a glyph for that Unicode code-point…so we get the little “tofu” square instead.

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

We need to make sure every emoji unicode char is wrapped in an tag (which helps the browser understand how to render it) when rendering the html:

App/src/components/RenderHTML.tsx

Line 14 in 538e440

function RenderHTML({html}: RenderHTMLProps) {

function RenderHTML({html: htmlParam}: RenderHTMLProps) {
const html = useMemo(() => {
    // Sanitize emoji characters already wrapped in <emoji> tags to prevent double-tagging.
    const sanitizedHtml = htmlParam.replaceAll(/<\/?emoji>/g, '');
    return Parser.replace(sanitizedHtml, {shouldEscapeText: false, filterRules: ['emoji']});
}, [htmlParam]);

NOTE: If we want to patch for another tag, we can discuss further.

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)

1. Option 1: Use shouldParseTitle instead of shouldRenderAsHTML
   

   App/src/components/ReportActionItem/MoneyRequestView.tsx

   Line 861 in 538e440

   shouldRenderAsHTML

2. Option 2: If we only want to patch MenuItem, we can do the same as the main solution here:
   

   App/src/components/MenuItem.tsx

   Line 567 in 538e440

   titleToWrap = title ?? '';

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/~021946226091102386118

[melvin-bot]

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