App: [hold for app #12854] [$2000] Shows incorrect emoji while combining the manual and emoji picker selected emoji within the text

@joekaufmanexpensify Yes, that’s right and by the way the RN PR has been merged already.

PS: please tag me next time for faster responses

Same.

Removed Help Wanted because job is on hold, please add back when it’s off hold

In that case, we should wait for this (https://github.com/Expensify/App/issues/12854) to be fixed. That will fix the controlled selection issue on Android and iOS that prevent us from testing this GH issue on native.

Updated Proposal (1)

As @s77rt mentioned, my proposal does not work for copy/paste case (thanks for mentioning the potential issue). So, here is my new proposal. It is very similar to the previous one.

Nothing changes for replaceEmojis function as we still need the emoji position. I only change the name to lastEmojiEnd.

function replaceEmojis(text) {
    let newText = text;
+   let lastEmojiEnd = 0;
-   const emojiData = text.match(CONST.REGEX.EMOJI_NAME);
+   const emojiData = text.match(CONST.REGEX.EMOJI_NAME) || [];
-   if (!emojiData || emojiData.length === 0) {
-       return text;
-   }
    for (let i = 0; i < emojiData.length; i++) {
        const checkEmoji = emojisTrie.search(emojiData[i].slice(1, -1));
        if (checkEmoji && checkEmoji.metaData.code) {
            let emojiReplacement = checkEmoji.metaData.code;

            // If this is the last emoji in the message and it's the end of the message so far,
            // add a space after it so the user can keep typing easily.
            if (i === emojiData.length - 1 && text.endsWith(emojiData[i])) {
                emojiReplacement += ' ';
            }
-           newText = newText.replace(emojiData[i], emojiReplacement);
+           newText = newText.replace(emojiData[i], (match, offset) => {
+               lastEmojiEnd= offset + emojiReplacement.length;
+               return emojiReplacement
+           });
        }
    }
+   return {newText, lastEmojiEnd};
-   return newText;
}

Then, to find the correct selection position, we need to get from the max value between lastEmojiEnd and the length of the new text added + previous selection end value.

-const newComment = EmojiUtils.replaceEmojis(comment);
+const {newText: newComment, lastEmojiEnd} = EmojiUtils.replaceEmojis(comment);
this.setState((prevState) => {
    const newState = {
        isCommentEmpty: !!newComment.match(/^(\s|`)*$/),
        value: newComment,
    };
    if (comment !== newComment) {
-       const remainder = prevState.value.slice(prevState.selection.end).length;
+       const lengthDiff = newComment.length - prevState.value.length;
+       const newPos = Math.max(prevState.selection.end + lengthDiff, lastEmojiEnd);
        newState.selection = {
-           start: newComment.length - remainder,
-           end: newComment.length - remainder,
+           start: newPos,
+           end: newPos,
        }
    }
    return newState;
});

Result

https://user-images.githubusercontent.com/50919443/205490250-5737ecf7-2711-4a40-8b3a-4e96596b297e.mp4

@sobitneupane I see now thanks for clarification!

@s77rt Thanks for your proposal..

Can you please explain compensation in your proposal? Also your proposal won’t do the job in all conditions. For example: test on this one “Hello ever: smile:yone”

@Pujan92 Thanks for your proposal.

The reason you stated for this issue seems valid. And your solution might do the job. But it is does not look good performance wise.

Can you think any other ways to solve this issue?