Fix problem with cursor jumping back to start when adding an emoji in edit mode

src/libs/focusComposerWithDelay/index.ts

@@ -0,0 +1,52 @@
+import type {TextInput} from 'react-native';
+import ComposerFocusManager from '@libs/ComposerFocusManager';
+import shouldSetSelectionRange from '@libs/shouldSetSelectionRange';
+import * as EmojiPickerAction from '@userActions/EmojiPickerAction';
+import type {FocusComposerWithDelay} from './types';
+
+const setSelectionRange = shouldSetSelectionRange();
+
+/**
+ * Create a function that focuses the composer.
+ */
+function focusComposerWithDelay(textInput: TextInput | HTMLTextAreaElement | null): FocusComposerWithDelay {
+    /**
+     * Focus the text input
+     * @param [shouldDelay] Impose delay before focusing the text input
+     * @param [forceSetSelection] Force selection range of text input
+     */
+    return (shouldDelay = false, forceSetSelection = undefined) => {
+        // There could be other animations running while we trigger manual focus.
+        // This prevents focus from making those animations janky.
+        if (!textInput || EmojiPickerAction.isEmojiPickerVisible()) {
+            return;
+        }
+
+        if (!shouldDelay) {
+            textInput.focus();
+            if (forceSetSelection) {
+                if (setSelectionRange) {
+                    (textInput as HTMLTextAreaElement).setSelectionRange(forceSetSelection.start, forceSetSelection.end);
+                } else {
+                    (textInput as TextInput).setSelection(forceSetSelection.start, forceSetSelection.end);
+                }
+            }
+            return;
+        }
+        ComposerFocusManager.isReadyToFocus().then(() => {
+            if (!textInput) {
+                return;
+            }
+            textInput.focus();
+            if (forceSetSelection) {
+                if (setSelectionRange) {
+                    (textInput as HTMLTextAreaElement).setSelectionRange(forceSetSelection.start, forceSetSelection.end);
+                } else {
+                    (textInput as TextInput).setSelection(forceSetSelection.start, forceSetSelection.end);
+                }
+            }
+        });
+    };
+}
+
+export default focusComposerWithDelay;

src/libs/focusComposerWithDelay/types.ts

@@ -0,0 +1,8 @@
+type Selection = {
+    start: number;
+    end: number;
+};
+
+type FocusComposerWithDelay = (shouldDelay?: boolean, forceSetSelection?: Selection) => void;
+
+export type {Selection, FocusComposerWithDelay};

src/libs/shouldSetSelectionRange/index.ts

@@ -0,0 +1,5 @@
+import type ShouldSetSelectionRange from './types';
+
+const shouldSetSelectionRange: ShouldSetSelectionRange = () => false;
+
+export default shouldSetSelectionRange;

src/libs/shouldSetSelectionRange/index.website.ts

@@ -0,0 +1,5 @@
+import type ShouldSetSelectionRange from './types';
+
+const shouldSetSelectionRange: ShouldSetSelectionRange = () => true;
+
+export default shouldSetSelectionRange;

src/libs/shouldSetSelectionRange/types.ts

@@ -0,0 +1,3 @@
+type ShouldSetSelectionRange = () => boolean;
+
+export default ShouldSetSelectionRange;

src/pages/home/report/ReportActionItemMessageEdit.tsx

@@ -25,6 +25,7 @@ import * as Browser from '@libs/Browser';
 import * as ComposerUtils from '@libs/ComposerUtils';
 import * as EmojiUtils from '@libs/EmojiUtils';
 import focusComposerWithDelay from '@libs/focusComposerWithDelay';
+import type {Selection} from '@libs/focusComposerWithDelay/types';
 import focusEditAfterCancelDelete from '@libs/focusEditAfterCancelDelete';
 import onyxSubscribe from '@libs/onyxSubscribe';
 import ReportActionComposeFocusManager from '@libs/ReportActionComposeFocusManager';
@@ -40,6 +41,7 @@ import CONST from '@src/CONST';
 import ONYXKEYS from '@src/ONYXKEYS';
 import type * as OnyxTypes from '@src/types/onyx';
 import * as ReportActionContextMenu from './ContextMenu/ReportActionContextMenu';
+import shouldUseEmojiPickerSelection from './shouldUseEmojiPickerSelection';
 
 type ReportActionItemMessageEditProps = {
     /** All the data of the action */
@@ -105,10 +107,7 @@ function ReportActionItemMessageEdit(
         }
         return initialDraft;
     });
-    const [selection, setSelection] = useState<{
-        start: number;
-        end: number;
-    }>(getInitialSelection);
+    const [selection, setSelection] = useState<Selection>(getInitialSelection);
     const [isFocused, setIsFocused] = useState<boolean>(false);
     const {hasExceededMaxCommentLength, validateCommentMaxLength} = useHandleExceedMaxCommentLength();
     const [modal, setModal] = useState<OnyxTypes.Modal>({
@@ -121,6 +120,7 @@ function ReportActionItemMessageEdit(
     const isFocusedRef = useRef<boolean>(false);
     const insertedEmojis = useRef<Emoji[]>([]);
     const draftRef = useRef(draft);
+    const emojiPickerSelectionRef = useRef<Selection | undefined>(undefined);
 
     useEffect(() => {
         if (ReportActionsUtils.isDeletedAction(action) || (action.message && draftMessage === action.message[0].html)) {
@@ -329,14 +329,22 @@ function ReportActionItemMessageEdit(
         deleteDraft();
     }, [action, debouncedSaveDraft, deleteDraft, draft, reportID]);
 
+    const shouldUseEmojiPickerSelectionRef = shouldUseEmojiPickerSelection();
     /**
      * @param emoji
      */
     const addEmojiToTextBox = (emoji: string) => {
-        setSelection((prevSelection) => ({
-            start: prevSelection.start + emoji.length + CONST.SPACE_LENGTH,
-            end: prevSelection.start + emoji.length + CONST.SPACE_LENGTH,
-        }));
+        const newSelection = {
+            start: selection.start + emoji.length + CONST.SPACE_LENGTH,
+            end: selection.start + emoji.length + CONST.SPACE_LENGTH,
+        };
+        setSelection(newSelection);
+
+        if (shouldUseEmojiPickerSelectionRef) {
+            // immediately set the selection again on android and Chrome mobile after focusing the
+            // input which seems to change the cursor position for a brief moment
+            emojiPickerSelectionRef.current = newSelection;
+        }
         updateDraft(ComposerUtils.insertText(draft, selection, `${emoji} `));
     };
 
@@ -450,7 +458,12 @@ function ReportActionItemMessageEdit(
                     <View style={styles.editChatItemEmojiWrapper}>
                         <EmojiPickerButton
                             isDisabled={shouldDisableEmojiPicker}
-                            onModalHide={() => focus(true)}
+                            onModalHide={() => {
+                                const emojiPickerSelection = emojiPickerSelectionRef.current ? {...emojiPickerSelectionRef.current} : undefined;
+                                emojiPickerSelectionRef.current = undefined;
+
+                                focus(true, emojiPickerSelection);
+                            }}
                             onEmojiSelected={addEmojiToTextBox}
                             id={emojiButtonID}
                             emojiPickerID={action.reportActionID}

src/pages/home/report/shouldUseEmojiPickerSelection/index.android.ts

@@ -0,0 +1,5 @@
+import type ShouldUseEmojiPickerSelection from './types';
+
+const shouldUseEmojiPickerSelection: ShouldUseEmojiPickerSelection = () => true;
+
+export default shouldUseEmojiPickerSelection;

src/pages/home/report/shouldUseEmojiPickerSelection/index.ts

@@ -0,0 +1,5 @@
+import type ShouldUseEmojiPickerSelection from './types';
+
+const shouldUseEmojiPickerSelection: ShouldUseEmojiPickerSelection = () => false;
+
+export default shouldUseEmojiPickerSelection;

src/pages/home/report/shouldUseEmojiPickerSelection/index.website.ts

@@ -0,0 +1,8 @@
+import * as Browser from '@libs/Browser';
+import type ShouldUseEmojiPickerSelection from './types';
+
+const isMobileChrome = Browser.isMobileChrome();
+
+const shouldUseEmojiPickerSelection: ShouldUseEmojiPickerSelection = () => isMobileChrome;
+
+export default shouldUseEmojiPickerSelection;

src/pages/home/report/shouldUseEmojiPickerSelection/types.ts

@@ -0,0 +1,3 @@
+type ShouldUseEmojiPickerSelection = () => boolean;
+
+export default ShouldUseEmojiPickerSelection;