[$250] Web - Chat - Web - "stars" emoji changes to a different one after sending it

[IuliiaHerets]

If you haven’t already, check out our contributing guidelines for onboarding and email [email protected] to request to join our Slack channel!

---

Version Number: 9.0.68-2 Reproducible in staging?: Y Reproducible in production?: Y Issue reported by: Applause Internal Team

Action Performed:

1. Navigate to https://staging.new.expensify.com/
2. Log in with any account
3. Open any 1:1 DM
4. Click inside the composer
5. Type ":star"
6. Select the "stars" emoji
7. Send the message

Expected Result:

The same emoji should be seen in the composer and in the chat.

Actual Result:

"stars" emoji changes to a different one after sending it.

Workaround:

Unknown

Platforms:

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

Screenshots/Videos

https://github.com/user-attachments/assets/ed7c4ca8-3b5c-4a29-8cec-2deb7cfd8e93

View all open jobs on GitHub

Upwork Automation - Do Not Edit

• Upwork Job URL: https://www.upwork.com/jobs/~021864084924595239388
• Upwork Job ID: 1864084924595239388
• Last Price Increase: 2024-12-03

Issue Owner

Current Issue Owner: @Christinadobrzyn

[melvin-bot[bot]]

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

[bernhardoj]

Proposal

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

Stars emoji is shown differently between composer and message.

What is the root cause of that problem?

This issue is becaused the emoji is not rendered with the same font family. For the composer, we use the EXP_NEUE and the font family look like this. https://github.com/Expensify/App/blob/1a6f48ea0e2139a82d0a96578badbf3f761bcf00/src/styles/index.ts#L2202-L2208

For the emoji, it's rendered by react-native-render-html and we also use the EXP_NEUE, but the font family look like this. https://github.com/Expensify/App/blob/1a6f48ea0e2139a82d0a96578badbf3f761bcf00/src/styles/index.ts#L235-L238

Notice that it doesn't have any fallback font for the emoji, thus the emoji is rendered differently. This happens becaue react-native-render-html only select the first available font.

If we remove the fontFamily style from baseFontStyle, then the emoji fontFamily will have the fallback font for the emoji. That's because we use a custom renderer for the emoji and use our custom Text component which has a defaul font family style. https://github.com/Expensify/App/blob/1a6f48ea0e2139a82d0a96578badbf3f761bcf00/src/components/EmojiWithTooltip/index.native.tsx#L4-L6 https://github.com/Expensify/App/blob/1a6f48ea0e2139a82d0a96578badbf3f761bcf00/src/components/Text.tsx#L31-L39

But not all textual tag has a custom renderer.

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

Since all emoji is rendered with EmojiRenderer, we can apply the font family manually on that component, specifically updating the emojiDefaultStyles. https://github.com/Expensify/App/blob/1a6f48ea0e2139a82d0a96578badbf3f761bcf00/src/components/HTMLEngineProvider/HTMLRenderers/EmojiRenderer.tsx#L20-L23

https://github.com/Expensify/App/blob/1a6f48ea0e2139a82d0a96578badbf3f761bcf00/src/styles/utils/emojiDefaultStyles/index.ts#L6-L10 https://github.com/Expensify/App/blob/1a6f48ea0e2139a82d0a96578badbf3f761bcf00/src/styles/utils/emojiDefaultStyles/index.native.ts#L4-L8

...FontUtils.fontFamily.platform.EXP_NEUE,

[Christinadobrzyn]

I'm not able to reproduce this. @bernhardoj are you still seeing this issue? what 'star' emoji are you choosing? It seems like the emoji in the OP isn't one that is available in my Chrome.... maybe that's the issue?

https://github.com/user-attachments/assets/0894829b-5851-4ded-a865-c69979a4bd75

[bernhardoj]

It's the :stars: emoji (the 3rd emoji from your video). It's only reproducible on Windows. The issue happens on the live markdown too if we use some markdown, such as bold, italic, etc.

[melvin-bot[bot]]

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

[melvin-bot[bot]]

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

[Christinadobrzyn]

Thanks @bernhardoj! Adding external so @sobitneupane can review your proposal.

[sobitneupane]

Thanks for the proposal @bernhardoj

Proposal from @bernhardoj looks good to me.

🎀 👀 🎀 C+ reviewed

[melvin-bot[bot]]

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

[Christinadobrzyn]

@bernhardoj do you think this has the same root? https://github.com/Expensify/App/issues/53546 something we can fix together?

[bernhardoj]

I'm pretty sure it's not the same.

[lakchote]

@bernhardoj's proposal LGTM.

[bernhardoj]

I'll open the PR tomorrow

[bernhardoj]

PR is ready

cc: @sobitneupane

[Christinadobrzyn]

Monitoring PR https://github.com/Expensify/App/pull/53676

[melvin-bot[bot]]

Reviewing label has been removed, please complete the "BugZero Checklist".

[melvin-bot[bot]]

The solution for this issue has been :rocket: deployed to production :rocket: in version 9.0.74-8 and is now subject to a 7-day regression period :calendar:. Here is the list of pull requests that resolve this issue:

• https://github.com/Expensify/App/pull/53676

If no regressions arise, payment will be issued on 2024-12-19. :confetti_ball:

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

• @sobitneupane requires payment through NewDot Manual Requests
• @bernhardoj requires payment through NewDot Manual Requests

[melvin-bot[bot]]

@sobitneupane @Christinadobrzyn @sobitneupane The PR fixing this issue has been merged! The following checklist (instructions) will need to be completed before the issue can be closed. Please copy/paste the BugZero Checklist from here into a new comment on this GH and complete it. If you have the K2 extension, you can simply click: [this button]

[Christinadobrzyn]

upcoming payment

Contributor: @bernhardoj owed $250 via NewDot Contributor+: @sobitneupane paid $250 via NewDot

@sobitneupane do we need a regression test for this?

[bernhardoj]

@sobitneupane is the C+

[bernhardoj]

Requested in ND.

[Christinadobrzyn]

@sobitneupane do we need a regression test for this?

[melvin-bot[bot]]

Payment Summary

Upwork Job

• Reviewer: @sobitneupane owed $250 via NewDot
• Reviewer: @bernhardoj owed $250 via NewDot

BugZero Checklist (@Christinadobrzyn)

• [x] I have verified the correct assignees and roles are listed above and updated the neccesary manual offers
• [ ] I have verified that there are no duplicate or incorrect contracts on Upwork for this job (https://www.upwork.com/ab/applicants/1864084924595239388/hired)
• [ ] I have paid out the Upwork contracts or cancelled the ones that are incorrect
• [x] I have verified the payment summary above is correct

[sobitneupane]

Regression Test Proposal

1. Open any chat
2. Click inside the composer.
3. Type ":star".
4. Select the "stars" emoji from the suggestion list.
5. Send the message.
6. Verify that the same "stars" emoji appears in both the composer and the chat after sending.

Do we agree 👍 or 👎

[sobitneupane]

BugZero Checklist:

• [x] [Contributor] Classify the bug:

Bug classification

Source of bug:

• [ ] 1a. Result of the original design (eg. a case wasn't considered)
• [x] 1b. Mistake during implementation
• [ ] 1c. Backend bug
• [ ] 1z. Other:

Where bug was reported:

• [x] 2a. Reported on production (eg. bug slipped through the normal regression and PR testing process on staging)
• [ ] 2b. Reported on staging (eg. found during regression or PR testing)
• [ ] 2d. Reported on a PR
• [ ] 2z. Other:

Who reported the bug:

• [ ] 3a. Expensify user
• [ ] 3b. Expensify employee
• [ ] 3c. Contributor
• [x] 3d. QA
• [ ] 3z. Other:

• [x] [Contributor] 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. This issue is reproducible only on Windows, so it might have been missed during the PR test.

• [x] [Contributor] If the regression was CRITICAL (e.g. interrupts a core flow) A discussion in #expensify-open-source 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:

• [x] [Contributor] If it was decided to create a regression test for the bug, please propose the regression test steps using the template below to ensure the same bug will not reach production again.

[Christinadobrzyn]

Regression test - https://github.com/Expensify/Expensify/issues/455048

Payment summary here - https://github.com/Expensify/App/issues/53324#issuecomment-2548845625

@sobitneupane please make sure to request payment in ND. TY!

[JmillsExpensify]

$250 approved for @bernhardoj

[garrettmknight]

$250 approved for @sobitneupane