Fix Composer not positioning caret properly on iOS after substituting…

… emoji for marker
Expensify · Dec 5, 2023 · b107b9c · b107b9c
1 parent 0f098ad
commit b107b9c
Show file tree

Hide file tree

Showing 2 changed files with 31 additions and 3 deletions.
diff --git a/src/components/Composer/index.ios.js b/src/components/Composer/index.ios.js
@@ -110,6 +110,8 @@ function Composer({shouldClear, onClear, isDisabled, maxLines, forwardedRef, isC
 
     // On native layers we like to have the Text Input not focused so the
     // user can read new chats without the keyboard in the way of the view.
+    // On Android the selection prop is required on the TextInput but this prop has issues on IOS
+    const propsToPass = _.omit(props, 'selection');
     return (
         <RNTextInput
             autoComplete="off"
@@ -121,7 +123,7 @@ function Composer({shouldClear, onClear, isDisabled, maxLines, forwardedRef, isC
             maxNumberOfLines={maxNumberOfLines}
             style={[composerStyles, styles.verticalAlignMiddle]}
             /* eslint-disable-next-line react/jsx-props-no-spreading */
-            {...props}
+            {...propsToPass}
             readOnly={isDisabled}
         />
     );

diff --git a/src/pages/home/report/ReportActionCompose/ComposerWithSuggestions/ComposerWithSuggestions.js b/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';
@@ -44,6 +44,7 @@ const {RNTextInputReset} = NativeModules;
 // and subsequent programmatic focus shifts (e.g., modal focus trap) to show the blue frame (:focus-visible style),
 // so we need to ensure that it is only updated after focus.
 const isMobileSafari = Browser.isMobileSafari();
+const isIOSNative = Platform.OS === 'ios';
 
 /**
  * Broadcast that the user is typing. Debounced to limit how often we publish client events.
@@ -142,6 +143,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', () => [])();
@@ -241,6 +244,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,
@@ -543,7 +551,25 @@ 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 (syncSelectionWithOnChangeTextRef.current !== null) {
+                            let positionSnaphsot = syncSelectionWithOnChangeTextRef.current.position;
+                            syncSelectionWithOnChangeTextRef.current = null;
+
+                            InteractionManager.runAfterInteractions(() => {
+                                textInputRef.current.setSelection(positionSnaphsot, positionSnaphsot);
+                            });
+                        }
+                    }}
                     onKeyPress={triggerHotkeyActions}
                     textAlignVertical="top"
                     style={[styles.textInputCompose, isComposerFullSize ? styles.textInputFullCompose : styles.flex4]}