[Due for payment 2025-10-21] [$250] Web - Compose Box - End key is not focusing on the end of the message

[lanitochka17]

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.2.0-0
Reproducible in staging?: Y
Reproducible in production?: Y
If this was caught during regression testing, add the test name, ID and link from TestRail: N/A
Email or phone of affected tester (no customers): rogerrosarioh06@gmail.com
Issue reported by: Applause - Internal Team

Action Performed:

1. Go to https://staging.new.expensify.com/
2. Open a room chat
3. Click on the emoji picker
4. Select any emoji
5. Write any text in the compose box
6. Tap on the "Home" key from the keyboard
7. Tap on the "End" key from the keyboard

Expected Result:

After tapping on the "End" key, focus should go to the end of the message

Actual Result:

When tapping on the "End" key, focus is going to the beginning of the text, after the emoji

Workaround:

Unknown

Platforms:

Select the officially supported platforms where the issue was reproduced:

• Android: App
• Android: mWeb Chrome
• iOS: App
• iOS: mWeb Safari
• iOS: mWeb Chrome
• Windows: Chrome
• MacOS: Chrome / Safari
• MacOS: Desktop

Platforms Tested:

On which of our officially supported platforms was this issue tested:

• Android: App
• Android: mWeb Chrome
• iOS: App
• iOS: mWeb Safari
• iOS: mWeb Chrome
• Windows: Chrome
• MacOS: Chrome / Safari
• MacOS: Desktop

Screenshots/Videos

Add any screenshot/video evidence

Bug6928610_1756330748283.ExpensifyENDKeyNotGoingEndOfMessageVid.mp4

View all open jobs on GitHub

Upwork Automation - Do Not Edit

• Upwork Job URL: https://www.upwork.com/jobs/~021964045049260175599
• Upwork Job ID: 1964045049260175599
• Last Price Increase: 2025-09-12
• Automatic offers:
• truph01 | Reviewer | 108824189

Issue Owner

Current Issue Owner: @strepanier03

[melvin-bot]

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

[mukhrr]

🚨 Edited by proposal-police: This proposal was edited at 2025-09-13 08:00:26 UTC.

Proposal

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

When users have text with emojis in the composer and press the End key (or Cmd+Right Arrow on Mac), the cursor goes to the beginning of the text after the emoji instead of moving to the actual end of the message.

What is the root cause of that problem?

The display: inline-block CSS property is being applied to emoji elements by the markdown rendering engine. This causes the emoji to behave as a block element, which interferes with text cursor positioning when using keyboard navigation (Home/End keys).

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

We can override default display of markdown emoji in web/index.html:

        span[data-type="emoji"] {
            display: inline !important;
        }

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)

Tried to change default emoji styles, but it seems we cannot overwrite from here:

App/src/hooks/useMarkdownStyle.ts

Lines 37 to 41 in 3938e13

	emoji: {
	...FontUtils.fontFamily.platform.CUSTOM_EMOJI_FONT,
	fontSize: emojiFontSize,
	lineHeight: variables.lineHeightXLarge,
	},

[melvin-bot]

@strepanier03 Huh... This is 4 days overdue. Who can take care of this?

[melvin-bot]

@strepanier03 Still overdue 6 days?! Let's take care of this!

[melvin-bot]

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

[melvin-bot]

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