[HOLD for payment 2024-06-20] [$250] iOS - Chat - The cursor moves one space backward when inserting text after an emoji

[kbecciv]

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: v1.4.76-1
Reproducible in staging?: y
Reproducible in production?: y
If this was caught during regression testing, add the test name, ID and link from TestRail: https://expensify.testrail.io/index.php?/tests/view/4577924
Issue reported by: Applause - Internal Team

Action Performed:

Pre-requisite: the user must be logged in.

1. Go to any chat.
2. Tap on the compose box.
3. Enter any text and an emoji.
4. After you have entered the emoji, enter any character again.
5. Verify the cursor moves one space backward.

Expected Result:

The cursor should remain at the end of the compose box content.

Actual Result:

The cursor moves one space backward when inserting text after an emoji.

Workaround:

n/a

Platforms:

Which of our officially supported platforms is this issue occurring on?

• Android: Native
• Android: mWeb Chrome
• iOS: Native
• iOS: mWeb Safari
• MacOS: Chrome / Safari
• MacOS: Desktop

Screenshots/Videos

Add any screenshot/video evidence

Bug6493190_1716832834593.Ndpf2964_1_.mp4

View all open jobs on GitHub

Upwork Automation - Do Not Edit

• Upwork Job URL: https://www.upwork.com/jobs/~011bc1604b6420e233
• Upwork Job ID: 1795296506360057856
• Last Price Increase: 2024-05-28
• Automatic offers:
• eh2077 | Reviewer | 102571526
• bernhardoj | Contributor | 102571528

Issue Owner

Current Issue Owner: @kadiealexander

[melvin-bot]

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

[kbecciv]

We think that this bug might be related to #vip-vsb

[kbecciv]

@kadiealexander FYI I haven't added the External label as I wasn't 100% sure about this issue. Please take a look and add the label if you agree it's a bug and can be handled by external contributors.

[melvin-bot]

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

[melvin-bot]

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

[bernhardoj]

Proposal

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

The cursor selection moves to the left by one character when adding a character after inserting an emoji.

What is the root cause of that problem?

When we add a text to the composer, it will save the new selection position to a ref if the commentValue is not equal to newComment

App/src/pages/home/report/ReportActionCompose/ComposerWithSuggestions/ComposerWithSuggestions.tsx

Lines 439 to 444 in 2514f29

	if (commentValue !== newComment) {
	const position = Math.max(selection.end + (newComment.length - commentRef.current.length), cursorPosition ?? 0);
	if (isIOSNative) {
	syncSelectionWithOnChangeTextRef.current = {position, value: newComment};
	}

commentValue is the text that we type while the newComment is the commentValue that has emoji code replaced to emoji character (for example :smile: to 😄).

If they are different, we want to manually correct the selection, however, on iOS, the selection prop is buggy so we use the ref sync solution that imperatively updates the selection that is introduced in #30835.

It will update/sync the selection in onChangeText.

App/src/pages/home/report/ReportActionCompose/ComposerWithSuggestions/ComposerWithSuggestions.tsx

Lines 553 to 563 in 2514f29

	if (isIOSNative && syncSelectionWithOnChangeTextRef.current) {
	const positionSnapshot = syncSelectionWithOnChangeTextRef.current.position;
	syncSelectionWithOnChangeTextRef.current = null;
	// ensure that selection is set imperatively after all state changes are effective
	InteractionManager.runAfterInteractions(() => {
	// note: this implementation is only available on non-web RN, thus the wrapping
	// 'if' block contains a redundant (since the ref is only used on iOS) platform check
	textInputRef.current?.setSelection(positionSnapshot, positionSnapshot);
	});
	}

However, there are a few things to notice here.

First, when we add an emoji from the emoji picker, commentValue is not equal to newComment even though there is no emoji code converted to an emoji character. The reason behind this is that we add a whitespace to the text

App/src/pages/home/report/ReportActionCompose/ComposerWithSuggestions/ComposerWithSuggestions.tsx

Line 417 in 2514f29

} = EmojiUtils.replaceAndExtractEmojis(isEmojiInserted ? ComposerUtils.insertWhiteSpaceAtIndex(commentValue, endIndex) : commentValue, preferredSkinTone, preferredLocale);

So, commentValue doesn't have the whitespace while the newComment has the whitespace. Previously, commentValue already contained the whitespace every time we added an emoji from the emoji picker, but this PR changes it so the whitespace is also added when we add the emoji from the device keyboard emoji picker.

This will then set the selection to the ref (syncSelectionWithOnChangeTextRef).

Next, if we add an emoji from the emoji picker, onChangeText won't be triggered. onChangeText will only be triggered if we input the text manually from keyboard.

So, when we add a character, it will run the selection sync logic which contains the old selection.

App/src/pages/home/report/ReportActionCompose/ComposerWithSuggestions/ComposerWithSuggestions.tsx

Lines 553 to 563 in 2514f29

	if (isIOSNative && syncSelectionWithOnChangeTextRef.current) {
	const positionSnapshot = syncSelectionWithOnChangeTextRef.current.position;
	syncSelectionWithOnChangeTextRef.current = null;
	// ensure that selection is set imperatively after all state changes are effective
	InteractionManager.runAfterInteractions(() => {
	// note: this implementation is only available on non-web RN, thus the wrapping
	// 'if' block contains a redundant (since the ref is only used on iOS) platform check
	textInputRef.current?.setSelection(positionSnapshot, positionSnapshot);
	});
	}

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

We need to compare newComment with the commentValue with whitespace appended because the manual selection correction is only used when we add emoji through emoji code.

const commentWithSpaceInserted = isEmojiInserted ? ComposerUtils.insertWhiteSpaceAtIndex(commentValue, endIndex) : commentValue;
...
if (commentWithSpaceInserted !== newComment) {
...

What alternative solutions did you explore? (Optional)

Clear the ref every time we call updateComment. This is to invalidate any old selection sync ref.

App/src/pages/home/report/ReportActionCompose/ComposerWithSuggestions/ComposerWithSuggestions.tsx

Lines 408 to 411 in 2514f29

	const updateComment = useCallback(
	(commentValue: string, shouldDebounceSaveComment?: boolean) => {
	raiseIsScrollLikelyLayoutTriggered();
	const {startIndex, endIndex, diff} = findNewlyAddedChars(lastTextRef.current, commentValue);

const updateComment = useCallback(
    (commentValue: string, shouldDebounceSaveComment?: boolean) => {
        if (isIOSNative) {
            syncSelectionWithOnChangeTextRef.current = null;
        }

[kaushiktd]

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

iOS - Chat - The cursor moves one space backward when inserting text after an emoji

What is the root cause of that problem?

When inputting text into the composer, the system saves the new selection position to a reference (ref) if the commentValue doesn't match the newComment. This disparity occurs due to the presence of an extra whitespace added to newComment during emoji insertion, which is absent in commentValue.

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

Instead of comparing commentValue and newComment, directly track the insertion point to determine cursor positioning.
Calculate the newCursorPosition dynamically based on the difference in length between the old and new comments.

App/src/pages/home/report/ReportActionCompose/ComposerWithSuggestions/ComposerWithSuggestions.tsx

Lines 439 to 444 in 2514f29

	if (commentValue !== newComment) {
	const position = Math.max(selection.end + (newComment.length - commentRef.current.length), cursorPosition ?? 0);
	if (isIOSNative) {
	syncSelectionWithOnChangeTextRef.current = {position, value: newComment};
	}

// Calculate the new cursor position based on the difference in text length
const currentLength = commentRef.current.length;
const newLength = newCommentConverted.length;
let newCursorPosition = cursorPosition ?? 0;

// Determine if an emoji was inserted and adjust cursor position accordingly
if (isEmojiInserted && newLength > currentLength) {
    newCursorPosition = endIndex + 1; // Move the cursor after the inserted emoji
} else if (currentLength > newLength) {
    newCursorPosition = Math.max(selection.end - (currentLength - newLength), 0); // Adjust cursor for deleted characters
} else {
    newCursorPosition = selection.end + (newLength - currentLength); // Adjust cursor for added characters
}

// Update the selection position and clear the ref if necessary
setSelection({ start: newCursorPosition, end: newCursorPosition });
if (isIOSNative) {
    syncSelectionWithOnChangeTextRef.current = { position: newCursorPosition, value: newComment };
}

This approach ensures accurate cursor positioning by directly tracking insertion points and dynamically adjusting cursor positions, thereby resolving the cursor issue caused by indirect comparisons and ensuring correct placement after inserting emojis or additional text.

video:-https://drive.google.com/file/d/19PDhzOkps6aXYRAWwyeWr3qyrc_xXzAP/view?usp=sharing

[eh2077]

@bernhardoj 's proposal looks good to me. Nice write up to unwrap the root cause! I also agree with the idea of fixing it by narrowing the scope of the manual-selection-correction-specific code.

🎀👀🎀 C+ reviewed

[melvin-bot]

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

[eh2077]

@MonilBhavsar Friendly bump, wdyt #42664 (comment)

[MonilBhavsar]

Yes, looking at this...

[MonilBhavsar]

@bernhardoj proposal's looks good and simple.
Is there any specific reason to clear syncSelectionWithOnChangeTextRef?

[melvin-bot]

📣 @eh2077 🎉 An offer has been automatically sent to your Upwork account for the Reviewer role 🎉 Thanks for contributing to the Expensify app!

Offer link
Upwork job

[melvin-bot]

📣 @bernhardoj 🎉 An offer has been automatically sent to your Upwork account for the Contributor role 🎉 Thanks for contributing to the Expensify app!

Offer link
Upwork job
Please accept the offer and leave a comment on the Github issue letting us know when we can expect a PR to be ready for review 🧑‍💻
Keep in mind: Code of Conduct | Contributing 📖

[bernhardoj]

Is there any specific reason to clear syncSelectionWithOnChangeTextRef?

Do you mean the alternative solution? syncSelectionWithOnChangeTextRef is supposed to be consumed (in onChangeText ) every time we type something (updateComment). But as explained in my proposal, onChangeText will only be called when we type from the keyboard, not from adding an emoji from the emoji picker. So, I suggest an alternative solution to always clear it before creating a new syncSelectionWithOnChangeTextRef so each syncSelectionWithOnChangeTextRef corresponds to each updateComment.

Btw, after retesting my main solution, it causes a regression, the cursor is before the emoji when adding an emoji

Screen.Recording.2024-06-03.at.19.14.04.mov

so I use the alternative instead.

PR is ready.

cc: @eh2077

[MonilBhavsar]

Makes sense, thanks!

[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 1.4.82-4 and is now subject to a 7-day regression period 📆. Here is the list of pull requests that resolve this issue:

• Fix the cursor moves one space backward when inserting text after an emoji #42985

If no regressions arise, payment will be issued on 2024-06-20. 🎊

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

• @bernhardoj requires payment automatic offer (Contributor)
• @eh2077 requires payment automatic offer (Reviewer)

[melvin-bot]

BugZero Checklist: The PR fixing this issue has been merged! The following checklist (instructions) will need to be completed before the issue can be closed:

• [@eh2077] The PR that introduced the bug has been identified. Link to the PR: feat: append whitespace after inserting emoji #30955
• [@eh2077] The offending PR has been commented on, pointing out the bug it caused and why, so the author and reviewers can learn from the mistake. Link to comment: https://github.com/Expensify/App/pull/30955/files#r1640633047
• [@eh2077] A discussion in #expensify-bugs has been started about whether any other steps should be taken (e.g. updating the PR review checklist) in order to catch this type of bug sooner. Link to discussion: NA
• [@eh2077] Determine if we should create a regression test for this bug. Yes, if only there isn't such one already added
• [@eh2077] If we decide to create a regression test for the bug, please propose the regression test steps to ensure the same bug will not reach production again.
• [@kadiealexander] Link the GH issue for creating/updating the regression test once above steps have been agreed upon: https://github.com/Expensify/Expensify/issues/405871

[eh2077]

Checklist

• [@eh2077] The PR that introduced the bug has been identified. Link to the PR: feat: append whitespace after inserting emoji #30955
• [@eh2077] The offending PR has been commented on, pointing out the bug it caused and why, so the author and reviewers can learn from the mistake. Link to comment: https://github.com/Expensify/App/pull/30955/files#r1640633047
• [@eh2077] A discussion in #expensify-bugs has been started about whether any other steps should be taken (e.g. updating the PR review checklist) in order to catch this type of bug sooner. Link to discussion: NA
• [@eh2077] Determine if we should create a regression test for this bug. Yes, if only there isn't such one already added

Regression test

1. Open any chat
2. Type anything
3. Add an emoji from emoji picker
4. Type a character
5. Verify the cursor/selection stays at its place

Do we agree 👍 or 👎

[kadiealexander]

Payouts due:

• Contributor: $250 @bernhardoj - https://www.upwork.com/nx/wm/offer/102571528
• Contributor+: $250 @eh2077 - https://www.upwork.com/nx/wm/offer/102571526