[$250] Chat - The size of the cursor after emoji differs in mWeb and android.

[IuliiaHerets]

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. 0.73-6
Reproducible in staging?: Yes
Reproducible in production?: Yes
If this was caught on HybridApp, is this reproducible on New Expensify Standalone?: Yes, reproducible on both
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): N
Issue reported by: Applause Internal Team

Action Performed:

1. Launch app in mweb and android
2. Open a report
3. Enter :wave and select wave emoji from list
4. Note the size of the cursor after emoji

Expected Result:

The size of the cursor after emoji must be same.

Actual Result:

The size of the cursor after emoji differs in mweb and android.

Workaround:

Unknown

Platforms:

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

Screenshots/Videos

Bug6689463_1733793799518.Screenrecorder-2024-12-10-06-49-13-661_compress_1.mp4

View all open jobs on GitHub

Upwork Automation - Do Not Edit

• Upwork Job URL: https://www.upwork.com/jobs/~021866908996080563894
• Upwork Job ID: 1866908996080563894
• Last Price Increase: 2024-12-18

Issue Owner

Current Issue Owner: @ishpaul777

[melvin-bot]

Triggered auto assignment to @anmurali (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/~021866908996080563894

[melvin-bot]

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

[JoshIri360]

Edited by proposal-police: This proposal was edited at 2024-12-11 22:31:19 UTC.

Proposal

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

When entering an emoji in the chat composer, the cursor size after the emoji differs between mobile web (mWeb) and Android platforms. Specifically, on mWeb the cursor appears larger than on Android when following an emoji character.

What is the root cause of that problem?

Based on the logs and code analysis, we found that while emoji characters are correctly styled with a larger font size (30px), the base text input styling (which controls cursor size) remains at the default font size (15px). This discrepancy occurs because:

1. The markdown styles only apply to specific elements (emoji, links, etc.) but not to the base text input
2. The cursor size is determined by the base text input's font size
3. On Android, the platform handles this differently and maintains cursor size consistency with the emoji

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

We should modify the base text input styling in the Composer component to match the emoji font size when the input contains only emojis. This can be done by:

1. Using the existing textContainsOnlyEmojis check in the Composer
2. Applying the larger font size (variables.fontSizeOnlyEmojis) to the entire input when this condition is true
3. This will ensure the cursor size matches the emoji size consistently across platforms

The change should be made in the Composer component since it controls the base text input styling and already has access to the emoji-only state detection.

const inputStyleMemo = useMemo(
    () => [
        StyleSheet.flatten([
            style,
            {outline: 'none'},
            // Add emoji-based font size to base input when content is emoji-only
            textContainsOnlyEmojis && {
                fontSize: variables.fontSizeOnlyEmojis,
                lineHeight: variables.lineHeightXLarge,
            },
        ]),
        StyleUtils.getComposeTextAreaPadding(isComposerFullSize),
        Browser.isMobileSafari() || Browser.isSafari() ? styles.rtlTextRenderForSafari : {},
        scrollStyleMemo,
        StyleUtils.getComposerMaxHeightStyle(maxLines, isComposerFullSize),
        isComposerFullSize ? {height: '100%', maxHeight: 'none'} : undefined,
        textContainsOnlyEmojis && hasMultipleLines ? styles.onlyEmojisTextLineHeight : {},
    ],
    [
        style,
        styles.rtlTextRenderForSafari,
        styles.onlyEmojisTextLineHeight,
        scrollStyleMemo,
        hasMultipleLines,
        StyleUtils,
        maxLines,
        isComposerFullSize,
        textContainsOnlyEmojis,
    ],
);

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

1. Test single emoji input:

   • Enter a single emoji
   • Verify cursor size matches emoji size
   • Verify consistency across platforms

2. Test emoji with spaces:

   • Enter emoji followed by space
   • Enter space followed by emoji
   • Verify cursor size remains consistent

3. Test mixed content:

   • Enter emoji followed by regular text
   • Verify cursor size reverts to normal
   • Enter regular text followed by emoji
   • Verify cursor size behavior at different positions

4. Test multiple emojis:

   • Enter multiple emojis with spaces between
   • Verify cursor size remains consistent throughout

What alternative solutions did you explore?

1. Modifying the markdown styles to include a base text style - Not possible as the MarkdownStyle interface doesn't support base text styling

[JoshIri360]

Proposal

Updated

[ishpaul777]

will review in couple hours

[kaushiktd]

Proposal

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

Chat - The size of the cursor after emoji differs in mWeb and android.

What is the root cause of that problem?

When we type only emoji characters, they are styled with a larger font size, while the default text size for the composer remains set to 15px. This discrepancy occurs because the markdownStyle is applied only to emojis.

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

To resolve this you need to change in below files:

1. useMarkdownStyle
   You need to specify the same font size for either only emojis or text with emojis using the following:

const emojiFontSize = variables.fontSizeEmojisWithinText;

2. index.native.tsx
   The composerStyle is defined as:

const composerStyle = useMemo(() => StyleSheet.flatten([style]), [style, styles]);

Here, textContainsOnlyEmojis is increasing the composer height and cursor height depending on it. To fix this, you should either remove styles.onlyEmojisTextLineHeight or adjust the lineHeight to match the composer's default height. This will ensure consistency in the height of the composer and the cursor.

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

What alternative solutions did you explore? (Optional)

Android Native

android.mov

Android mWeb

android-mWeb.mov

IOS Native

ios.mp4

IOS mWeb

ios-mWeb.mp4

Web

web.mov

[melvin-bot]

📣 It's been a week! Do we have any satisfactory proposals yet? Do we need to adjust the bounty for this issue? 💸

[ishpaul777]

Currently i see three different behaviour on web, native apps and mweb i am not sure whilch one is correct

Native - enternig empty space will not reset cursor size

Screen.Recording.2024-12-19.at.12.24.38.AM.mov

Mweb chrome - first space reset cursor size then if deleted than it does not reset at all

Screen.Recording.2024-12-19.at.12.32.49.AM.mov

Web- enternig empty space will reset cursor size

Screen.Recording.2024-12-19.at.12.33.51.AM.mov

IMO web one is correct

cc @Expensify/design Can anyone please confirm the correct behaviour?

[shawnborton]

Web - entering empty space will reset cursor size

This makes sense to me too - I think that would be my expectation across all platforms if possible.

[dannymcclain]

Agree 👍

[dubielzyk-expensify]

Same 👍

[melvin-bot]

@anmurali @ishpaul777 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!

[melvin-bot]

@anmurali, @ishpaul777 Eep! 4 days overdue now. Issues have feelings too...

[ishpaul777]

Thank you team!

---

we are still looking for proposals!

@kaushiktd @JoshIri360 Please update your proposals to make behaviour consistent across platforms

[kaushiktd]

@ishpaul777

I have checked across all the platforms and updated the proposal with recordings.