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.

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

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

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

Proposal

Updated

will review in couple hours

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)

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

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

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

Web- enternig empty space will reset cursor size

IMO web one is correct

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

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.

Agree 👍

Same 👍

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

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

Thank you team!

we are still looking for proposals!

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

@ishpaul777

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

There is an existing issue in Safari (both desktop and iOS) where the cursor size does not adjust correctly after an emoji, even if the font size changes. This is due to a long-standing bug in WebKit, where the cursor inherits the line height rather than the actual font size. [See screenshot below for reference – demonstrating font size change but persistent large cursor due to emoji size.]




Bug Reference: https://bugs.webkit.org/show_bug.cgi?id=13820

Platform Breakdown:

• Mobile Web (Chrome – Android): Cursor size behaves as expected, adjusting with font size.


• Web (Safari – Desktop/iOS) & Mobile Web (Safari/Chrome – iOS): Cursor size remains larger after an emoji, unaffected by font size changes.

Native App Considerations:
For native apps, text inputs allow only one font size at a time. This means if we attempt to reduce the cursor size after a space (following an emoji), the entire font size would decrease – not just the cursor.


Let me know if this broader font size reduction is an acceptable solution or if we should explore alternative approaches.

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