Merge pull request #12632 from AndreasBBS/bug/12325

Fix cursor position when adding emoji
Expensify · Nov 16, 2022 · e79e484 · e79e484
2 parents ef0df80 + 0a9087c
commit e79e484
Show file tree

Hide file tree

Showing 2 changed files with 24 additions and 4 deletions.
diff --git a/src/pages/home/report/ReportActionCompose.js b/src/pages/home/report/ReportActionCompose.js
@@ -383,9 +383,19 @@ class ReportActionCompose extends React.Component {
      */
     updateComment(comment, shouldDebounceSaveComment) {
         const newComment = EmojiUtils.replaceEmojis(comment);
-        this.setState({
-            isCommentEmpty: !!newComment.match(/^(\s|`)*$/),
-            value: newComment,
+        this.setState((prevState) => {
+            const newState = {
+                isCommentEmpty: !!newComment.match(/^(\s|`)*$/),
+                value: newComment,
+            };
+            if (comment !== newComment) {
+                const remainder = prevState.value.slice(prevState.selection.end).length;
+                newState.selection = {
+                    start: newComment.length - remainder,
+                    end: newComment.length - remainder,
+                };
+            }
+            return newState;
         });
 
         // Indicate that draft has been created.

diff --git a/src/pages/home/report/ReportActionItemMessageEdit.js b/src/pages/home/report/ReportActionItemMessageEdit.js
@@ -102,7 +102,17 @@ class ReportActionItemMessageEdit extends React.Component {
      */
     updateDraft(draft) {
         const newDraft = EmojiUtils.replaceEmojis(draft);
-        this.setState({draft: newDraft});
+        this.setState((prevState) => {
+            const newState = {draft: newDraft};
+            if (draft !== newDraft) {
+                const remainder = prevState.draft.slice(prevState.selection.end).length;
+                newState.selection = {
+                    start: newDraft.length - remainder,
+                    end: newDraft.length - remainder,
+                };
+            }
+            return newState;
+        });
 
         // This component is rendered only when draft is set to a non-empty string. In order to prevent component
         // unmount when user deletes content of textarea, we set previous message instead of empty string.