[Due for payment 2025-06-02] [$150] Android - Chat - While entering :+1 after emoji in edit comment cursor shown at beginning.

[jponikarchuk]

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: V9.1.39-0
Reproducible in staging?: Yes
Reproducible in production?: Yes
If this was caught during regression testing, add the test name, ID and link from TestRail: https://expensify.testrail.io/index.php?/tests/view/6034550
Email or phone of affected tester (no customers): Slottwo1 [email protected]
Issue reported by: Applause Internal Team
Device used: Redminote note 10s android 13
App Component: Chat Report View

Action Performed:

1. Launch app
2. Open a chat
3. Send a message
4. Long press the sent message and select edit comment
5. Tap emoji picker and select an emoji
6. Enter :+1
7. Tap emoji picker and change skin tone
8. Tap backdrop to close emoji modal

Expected Result:

While entering :+1 after emoji in edit comment cursor must not be shown at beginning.

Actual Result:

While entering :+1 after emoji in edit comment cursor shown at beginning.

Workaround:

Unknown

Platforms:

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

Screenshots/Videos

1.mp4

View all open jobs on GitHub

Upwork Automation - Do Not Edit

• Upwork Job URL: https://www.upwork.com/jobs/~021920784691456319514
• Upwork Job ID: 1920784691456319514
• Last Price Increase: 2025-05-14

Issue Owner

Current Issue Owner: @dylanexpensify

[melvin-bot]

Triggered auto assignment to @dylanexpensify (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]

@dylanexpensify Uh oh! This issue is overdue by 2 days. Don't forget to update your issues!

[dylanexpensify]

reproing tomorrow!

[bernhardoj]

Proposal

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

After closing the emoji picker, the cursor moves back.

What is the root cause of that problem?

The test step has unnecessary steps, such as changing the skin tone. This issue happens after we select an emoji once from the emoji picker, type anything, and then open emoji picker again and then close without selecting an emoji.

For example, if we input and select 😄 from the emoji picker Hi 😄 asd|, when we reopen and then close the emoji picker, the cursor will move to the front of the emoji Hi 😄 |asd.

When closing the emoji picker, we refocus the composer and pass a emojiPickerSelectionRef as the selection.

App/src/pages/home/report/ReportActionItemMessageEdit.tsx

Lines 176 to 180 in a3446b8

	const setUpComposeFocusManager = useCallback(() => {
	ReportActionComposeFocusManager.onComposerFocus(() => {
	focus(true, emojiPickerSelectionRef.current ? {...emojiPickerSelectionRef.current} : undefined);
	}, true);
	}, [focus]);

It's set when selecting an emoji from the picker.

App/src/pages/home/report/ReportActionItemMessageEdit.tsx

Lines 290 to 305 in a3446b8

	const addEmojiToTextBox = (emoji: string) => {
	const newSelection = {
	start: selection.start + emoji.length + CONST.SPACE_LENGTH,
	end: selection.start + emoji.length + CONST.SPACE_LENGTH,
	positionX: 0,
	positionY: 0,
	};
	setSelection(newSelection);
	if (shouldUseForcedSelectionRange) {
	// On Android and Chrome mobile, focusing the input sets the cursor position back to the start.
	// To fix this, immediately set the selection again after focusing the input.
	emojiPickerSelectionRef.current = newSelection;
	}
	updateDraft(insertText(draft, selection, `${emoji} `));
	};

However, we never clear the ref, that's why when refocus happens, the selection moves back to the front of the previously picked emoji.

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

Clear the ref after refocus.

App/src/pages/home/report/ReportActionItemMessageEdit.tsx

Lines 176 to 180 in a3446b8

	const setUpComposeFocusManager = useCallback(() => {
	ReportActionComposeFocusManager.onComposerFocus(() => {
	focus(true, emojiPickerSelectionRef.current ? {...emojiPickerSelectionRef.current} : undefined);
	}, true);
	}, [focus]);

emojiPickerSelectionRef.current = undefined;

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

N/A

[melvin-bot]

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

[melvin-bot]

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

[melvin-bot]

Upwork job price has been updated to $75

[dylanexpensify]

Updated pricing giving size

[bernhardoj]

@dylanexpensify is the price adjusted because of the simple solution?

[mananjadhav]

@bernhardoj's proposal looks good.

@dylanexpensify Can we bump the price a little bit? We will still need to test it on all platforms, wdyt?

🎀 👀 🎀 C+ reviewed.

[melvin-bot]

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

[melvin-bot]

Upwork job price has been updated to $150

[bernhardoj]

PR is ready

cc: @mananjadhav

[mananjadhav]

PR is reviewed.

[melvin-bot]

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

[melvin-bot]

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

• Fix wrong cursor after close emoji picker #62071

If no regressions arise, payment will be issued on 2025-06-02. 🎊

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

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

[melvin-bot]

@mananjadhav @dylanexpensify @mananjadhav 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]