[$250] Chat - Double strike through is applied for emojis

[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.79-0
Reproducible in staging?: Yes
Reproducible in production?: Yes
Issue reported by: Applause Internal Team
Device used: Redmi note 10s Android 13
App Component: Chat Report View

Action Performed:

1. Go to https://staging.new.expensify.com/home
2. Open a chat
3. Enter ~😗~
4. Send the message

Expected Result:

Double strike through must not be applied for emojis.

Actual Result:

Double strike through is applied for emojis.

Workaround:

Unknown

Platforms:

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

Screenshots/Videos

Bug6702931_1735302419927.screenrecorder-2024-12-27-08-47-23-706.mp4

View all open jobs on GitHub

Upwork Automation - Do Not Edit

• Upwork Job URL: https://www.upwork.com/jobs/~021876648717605677908
• Upwork Job ID: 1876648717605677908
• Last Price Increase: 2025-01-07

Issue Owner

Current Issue Owner: @

Issue Owner

Current Issue Owner: @

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

[Shahidullah-Muffakir]

It will be fixed by this PR Expensify/react-native-live-markdown#591

[bernhardoj]

Proposal

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

Double strike-through is seen on emoji.

What is the root cause of that problem?

We previously prevented the emoji from being formatted in #40617. The strikethrough style is applied from the parent (<del>) and the emoji itself. In that PR, we apply an inline-flex style so the emoji won't be affected by the parent strikethrough style.

But in #47547, we changed it to inline because selecting the text with emoji won't have the same height.

Compared to when using inline.

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

I think it's more important to prevent the emoji from being formatted compared to making sure the selection height to be same and it's barely noticeable too, so I suggest to use inline-flex back and add `textDecorationLine: 'none' to override the text decoration style on the emoji itself.

App/src/styles/utils/emojiDefaultStyles/index.ts

Lines 6 to 9 in e94df0f

	const emojiDefaultStyles: EmojiDefaultStyles = {
	...FontUtils.fontFamily.platform.EXP_NEUE,
	...display.dInline,
	};

const emojiDefaultStyles: EmojiDefaultStyles = {
    ...FontUtils.fontFamily.platform.EXP_NEUE,
    ...display.dInlineFlex,
    textDecorationLine: 'none',
};

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

N/A

[parasharrajat]

@bernhardoj Do we have any other solution to this problem?

[parasharrajat]

This looks like a duplicate issue of #14676.

[bernhardoj]

It was solved months ago, but it happens again.

[bfitzexpensify]

I agree that this is a duplicate of #14676

[bernhardoj]

@bfitzexpensify I wouldn't say it's a dupe because that issue is solved months ago, but this issue happens again, so we should fix it again.

[parasharrajat]

I agree with you but Expensify/react-native-live-markdown#591 is solving this issue at lib level.

[bernhardoj]

It's not a live markdown issue.

[parasharrajat]

Oh, correct. It was very confusing from the issue.

[parasharrajat]

@bfitzexpensify Could you please reopen this issue. Looks like it a valid issue. I misinterpreted the above PR. It is solving the issue on TextInput.

We are talking about sending messages here. It was solved in #14676 long back but it looks like the
but recently something broke it.

Can I be C+ on this issue given that I have already dug into this issue?

[bernhardoj]

@bfitzexpensify hi, can you recheck this one please?

[melvin-bot]

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

[melvin-bot]

Current assignee @parasharrajat is eligible for the External assigner, not assigning anyone new.

[melvin-bot]

Current assignee @parasharrajat is eligible for the External assigner, not assigning anyone new.

[parasharrajat]

@bernhardoj Is there another way to Keep the selection fix?

[bernhardoj]

I was looking for that when working on the proposal, but I can't find another way to prevent a child element from getting affected by the parent strike-through without using the inline-flex style.

[parasharrajat]

May be we can target the selection issue and find some other solution that works for it.

[bernhardoj]

I have no idea for that.

[melvin-bot]

@parasharrajat @bfitzexpensify this issue was created 2 weeks ago. Are we close to approving a proposal? If not, what's blocking us from getting this issue assigned? Don't hesitate to create a thread in #expensify-open-source to align faster in real time. Thanks!

[parasharrajat]

Waiting to see a few more proposals while I test this myself.