Fix 29405 cursor displayed before emoji on ios native

src/pages/home/report/ReportActionCompose/ComposerWithSuggestions/ComposerWithSuggestions.js

@@ -1,7 +1,7 @@
 import {useIsFocused, useNavigation} from '@react-navigation/native';
 import lodashGet from 'lodash/get';
 import React, {useCallback, useEffect, useImperativeHandle, useMemo, useRef, useState} from 'react';
-import {findNodeHandle, NativeModules, View} from 'react-native';
+import {findNodeHandle, InteractionManager, NativeModules, Platform, View} from 'react-native';
 import {withOnyx} from 'react-native-onyx';
 import _ from 'underscore';
 import Composer from '@components/Composer';
@@ -39,6 +39,8 @@ import {defaultProps, propTypes} from './composerWithSuggestionsProps';
 
 const {RNTextInputReset} = NativeModules;
 
+const isIOSNative = Platform.OS === 'ios';
+
 /**
  * Broadcast that the user is typing. Debounced to limit how often we publish client events.
  * @param {String} reportID
@@ -133,6 +135,8 @@ function ComposerWithSuggestions({
     const textInputRef = useRef(null);
     const insertedEmojisRef = useRef([]);
 
+    const syncSelectionWithOnChangeTextRef = useRef(null);
+
     // A flag to indicate whether the onScroll callback is likely triggered by a layout change (caused by text change) or not
     const isScrollLikelyLayoutTriggered = useRef(false);
     const suggestions = lodashGet(suggestionsRef, 'current.getSuggestions', () => [])();
@@ -232,6 +236,11 @@ function ComposerWithSuggestions({
             setValue(newCommentConverted);
             if (commentValue !== newComment) {
                 const position = Math.max(selection.end + (newComment.length - commentRef.current.length), cursorPosition || 0);
+
+                if (isIOSNative) {
+                    syncSelectionWithOnChangeTextRef.current = {position, value: newComment};
+                }
+
                 setSelection({
                     start: position,
                     end: position,
@@ -535,7 +544,27 @@ function ComposerWithSuggestions({
                     ref={setTextInputRef}
                     placeholder={inputPlaceholder}
                     placeholderTextColor={theme.placeholderText}
-                    onChangeText={(commentValue) => updateComment(commentValue, true)}
+                    onChangeText={(commentValue) => {
+                        if (syncSelectionWithOnChangeTextRef.current !== null) {
+                            setSelection({
+                                start: syncSelectionWithOnChangeTextRef.current.position,
+                                end: syncSelectionWithOnChangeTextRef.current.position,
+                            });
+                        }
+
+                        updateComment(commentValue, true);
+
+                        if (isIOSNative && syncSelectionWithOnChangeTextRef.current !== null) {
+                            const positionSnapshot = syncSelectionWithOnChangeTextRef.current.position;
+                            syncSelectionWithOnChangeTextRef.current = null;
+
+                            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);
+                            });
+                        }
+                    }}
                     onKeyPress={triggerHotkeyActions}
                     textAlignVertical="top"
                     style={[styles.textInputCompose, isComposerFullSize ? styles.textInputFullCompose : styles.textInputCollapseCompose]}