Review changes

Author: MrRefactor

src/libs/focusComposerWithDelay/index.ts

@@ -10,9 +10,9 @@ function focusComposerWithDelay(textInput: InputType | null): FocusComposerWithD
     /**
      * Focus the text input
      * @param [shouldDelay] Impose delay before focusing the text input
-     * @param [forceSetSelection] Force selection range of text input
+     * @param [forcedSelectionRange] Force selection range of text input
      */
-    return (shouldDelay = false, forceSetSelection = undefined) => {
+    return (shouldDelay = false, forcedSelectionRange = undefined) => {
         // There could be other animations running while we trigger manual focus.
         // This prevents focus from making those animations janky.
         if (!textInput || EmojiPickerAction.isEmojiPickerVisible()) {
@@ -21,8 +21,8 @@ function focusComposerWithDelay(textInput: InputType | null): FocusComposerWithD
 
         if (!shouldDelay) {
             textInput.focus();
-            if (forceSetSelection) {
-                setTextInputSelection(textInput, forceSetSelection);
+            if (forcedSelectionRange) {
+                setTextInputSelection(textInput, forcedSelectionRange);
             }
             return;
         }
@@ -31,8 +31,8 @@ function focusComposerWithDelay(textInput: InputType | null): FocusComposerWithD
                 return;
             }
             textInput.focus();
-            if (forceSetSelection) {
-                setTextInputSelection(textInput, forceSetSelection);
+            if (forcedSelectionRange) {
+                setTextInputSelection(textInput, forcedSelectionRange);
             }
         });
     };

src/libs/focusComposerWithDelay/setTextInputSelection.ts

@@ -4,11 +4,11 @@ import type {InputType, Selection} from './types';
 
 const setSelectionRange = shouldSetSelectionRange();
 
-const setTextInputSelection = (textInput: InputType, forceSetSelection: Selection) => {
+const setTextInputSelection = (textInput: InputType, forcedSelectionRange: Selection) => {
     if (setSelectionRange) {
-        (textInput as HTMLTextAreaElement).setSelectionRange(forceSetSelection.start, forceSetSelection.end);
+        (textInput as HTMLTextAreaElement).setSelectionRange(forcedSelectionRange.start, forcedSelectionRange.end);
     } else {
-        (textInput as TextInput).setSelection(forceSetSelection.start, forceSetSelection.end);
+        (textInput as TextInput).setSelection(forcedSelectionRange.start, forcedSelectionRange.end);
     }
 };
 

src/libs/focusComposerWithDelay/types.ts

@@ -5,7 +5,7 @@ type Selection = {
     end: number;
 };
 
-type FocusComposerWithDelay = (shouldDelay?: boolean, forceSetSelection?: Selection) => void;
+type FocusComposerWithDelay = (shouldDelay?: boolean, forcedSelectionRange?: Selection) => void;
 
 type InputType = TextInput | HTMLTextAreaElement;
 

src/pages/home/report/ReportActionItemMessageEdit.tsx

@@ -69,6 +69,7 @@ const emojiButtonID = 'emojiButton';
 const messageEditInput = 'messageEditInput';
 
 const isMobileSafari = Browser.isMobileSafari();
+const shouldUseForcedSelectionRange = shouldUseEmojiPickerSelection();
 
 function ReportActionItemMessageEdit(
     {action, draftMessage, reportID, index, shouldDisableEmojiPicker = false, preferredSkinTone = CONST.EMOJI_DEFAULT_SKIN_TONE}: ReportActionItemMessageEditProps,
@@ -330,7 +331,6 @@ function ReportActionItemMessageEdit(
         deleteDraft();
     }, [action, debouncedSaveDraft, deleteDraft, draft, reportID]);
 
-    const shouldUseEmojiPickerSelectionRef = shouldUseEmojiPickerSelection();
     /**
      * @param emoji
      */
@@ -341,9 +341,9 @@ function ReportActionItemMessageEdit(
         };
         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
+        if (shouldUseForcedSelectionRange) {
+            // On Android and Chrome mobile, focusing the input sets the cursor position back to the start.
+            // To fix this, immediately set the selection again after focusing the input.
             emojiPickerSelectionRef.current = newSelection;
         }
         updateDraft(ComposerUtils.insertText(draft, selection, `${emoji} `));
@@ -460,10 +460,7 @@ function ReportActionItemMessageEdit(
                         <EmojiPickerButton
                             isDisabled={shouldDisableEmojiPicker}
                             onModalHide={() => {
-                                const emojiPickerSelection = emojiPickerSelectionRef.current ? {...emojiPickerSelectionRef.current} : undefined;
-                                emojiPickerSelectionRef.current = undefined;
-
-                                focus(true, emojiPickerSelection);
+                                focus(true, emojiPickerSelectionRef.current ? {...emojiPickerSelectionRef.current} : undefined);
                             }}
                             onEmojiSelected={addEmojiToTextBox}
                             id={emojiButtonID}