Fix: Composer not focused on click while editor's emoji modal is open

src/components/Composer/index.js

@@ -18,7 +18,6 @@ import Text from '../Text';
 import isEnterWhileComposition from '../../libs/KeyboardShortcut/isEnterWhileComposition';
 import CONST from '../../CONST';
 import withNavigation from '../withNavigation';
-import ReportActionComposeFocusManager from '../../libs/ReportActionComposeFocusManager';
 
 const propTypes = {
     /** Maximum number of lines in the text input */
@@ -80,9 +79,6 @@ const propTypes = {
     /** Function to check whether composer is covered up or not */
     checkComposerVisibility: PropTypes.func,
 
-    /** Whether this is the report action compose */
-    isReportActionCompose: PropTypes.bool,
-
     /** Whether the sull composer is open */
     isComposerFullSize: PropTypes.bool,
 
@@ -113,7 +109,6 @@ const defaultProps = {
     setIsFullComposerAvailable: () => {},
     shouldCalculateCaretPosition: false,
     checkComposerVisibility: () => false,
-    isReportActionCompose: false,
     isComposerFullSize: false,
 };
 
@@ -164,7 +159,6 @@ function Composer({
     setIsFullComposerAvailable,
     checkComposerVisibility,
     selection: selectionProp,
-    isReportActionCompose,
     isComposerFullSize,
     ...props
 }) {
@@ -388,9 +382,6 @@ function Composer({
         }
 
         return () => {
-            if (!isReportActionCompose) {
-                ReportActionComposeFocusManager.clear();
-            }
             unsubscribeFocus();
             unsubscribeBlur();
             document.removeEventListener('paste', handlePaste);
@@ -468,18 +459,6 @@ function Composer({
                 numberOfLines={numberOfLines}
                 disabled={isDisabled}
                 onKeyPress={handleKeyPress}
-                onFocus={(e) => {
-                    ReportActionComposeFocusManager.onComposerFocus(() => {
-                        if (!textInput.current) {
-                            return;
-                        }
-
-                        textInput.current.focus();
-                    });
-                    if (props.onFocus) {
-                        props.onFocus(e);
-                    }
-                }}
             />
             {shouldCalculateCaretPosition && renderElementForCaretPosition}
         </>

src/components/EmojiPicker/EmojiPickerButton.js

@@ -20,13 +20,17 @@ const propTypes = {
     /** Unique id for emoji picker */
     emojiPickerID: PropTypes.string,
 
+    /** A callback function when the button is pressed */
+    onPress: PropTypes.func,
+
     ...withLocalizePropTypes,
 };
 
 const defaultProps = {
     isDisabled: false,
     nativeID: '',
     emojiPickerID: '',
+    onPress: () => {},
 };
 
 function EmojiPickerButton(props) {
@@ -40,12 +44,13 @@ function EmojiPickerButton(props) {
                 ref={emojiPopoverAnchor}
                 style={({hovered, pressed}) => [styles.chatItemEmojiButton, StyleUtils.getButtonBackgroundColorStyle(getButtonState(hovered, pressed))]}
                 disabled={props.isDisabled}
-                onPress={() => {
+                onPress={(e) => {
                     if (!EmojiPickerAction.emojiPickerRef.current.isEmojiPickerVisible) {
                         EmojiPickerAction.showEmojiPicker(props.onModalHide, props.onEmojiSelected, emojiPopoverAnchor.current, undefined, () => {}, props.emojiPickerID);
                     } else {
                         EmojiPickerAction.emojiPickerRef.current.hideEmojiPicker();
                     }
+                    props.onPress(e);
                 }}
                 nativeID={props.nativeID}
                 accessibilityLabel={props.translate('reportActionCompose.emoji')}

src/libs/ReportActionComposeFocusManager.ts

@@ -15,6 +15,7 @@ let mainComposerFocusCallback: FocusCallback | null = null;
  * Typical uses of this would be call the focus on the ReportActionComposer.
  *
  * @param callback callback to register
+ * @param isMainComposer
  */
 function onComposerFocus(callback: FocusCallback, isMainComposer = false) {
     if (isMainComposer) {
@@ -28,16 +29,18 @@ function onComposerFocus(callback: FocusCallback, isMainComposer = false) {
  * Request focus on the ReportActionComposer
  */
 function focus() {
-    if (typeof focusCallback !== 'function') {
-        if (typeof mainComposerFocusCallback !== 'function') {
-            return;
-        }
+    if (typeof focusCallback !== 'function' && typeof mainComposerFocusCallback !== 'function') {
+        return;
+    }
 
-        mainComposerFocusCallback();
+    if (typeof focusCallback === 'function') {
+        focusCallback();
         return;
     }
 
-    focusCallback();
+    if (typeof mainComposerFocusCallback === 'function') {
+        mainComposerFocusCallback();
+    }
 }
 
 /**

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

@@ -384,16 +384,19 @@ function ComposerWithSuggestions({
         focusWithDelay(textInputRef.current)(shouldDelay);
     }, []);
 
-    const setUpComposeFocusManager = useCallback(() => {
-        // This callback is used in the contextMenuActions to manage giving focus back to the compose input.
-        ReportActionComposeFocusManager.onComposerFocus(() => {
-            if (!willBlurTextInputOnTapOutside || !isFocused) {
-                return;
-            }
+    const setUpComposeFocusManager = useCallback(
+        (isMainComposer = true) => {
+            // This callback is used in the contextMenuActions to manage giving focus back to the compose input.
+            ReportActionComposeFocusManager.onComposerFocus(() => {
+                if (!willBlurTextInputOnTapOutside || !isFocused) {
+                    return;
+                }
 
-            focus(false);
-        }, true);
-    }, [focus, isFocused]);
+                focus(false);
+            }, isMainComposer);
+        },
+        [focus, isFocused],
+    );
 
     /**
      * Check if the composer is visible. Returns true if the composer is not covered up by emoji picker or menu. False otherwise.
@@ -517,7 +520,10 @@ function ComposerWithSuggestions({
                     onKeyPress={triggerHotkeyActions}
                     style={[styles.textInputCompose, isComposerFullSize ? styles.textInputFullCompose : styles.flex4]}
                     maxLines={maxComposerLines}
-                    onFocus={onFocus}
+                    onFocus={() => {
+                        setUpComposeFocusManager(false);
+                        onFocus();
+                    }}
                     onBlur={onBlur}
                     onClick={setShouldBlockSuggestionCalcToFalse}
                     onPasteFile={displayFileInModal}

src/pages/home/report/ReportActionItemMessageEdit.js

@@ -130,7 +130,24 @@ function ReportActionItemMessageEdit(props) {
         [props.action.reportActionID],
     );
 
+    /**
+     * Focus the composer text input
+     * @param {Boolean} [shouldDelay=false] Impose delay before focusing the composer
+     * @memberof ReportActionCompose
+     */
+    const focus = useCallback((shouldDelay = false) => {
+        focusWithDelay(textInputRef.current)(shouldDelay);
+    }, []);
+
+    const setUpComposeFocusManager = useCallback(() => {
+        ReportActionComposeFocusManager.onComposerFocus(() => {
+            focus(true);
+        });
+    }, [focus]);
+
     useEffect(() => {
+        setUpComposeFocusManager();
+
         // For mobile Safari, updating the selection prop on an unfocused input will cause it to automatically gain focus
         // 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.
@@ -145,6 +162,8 @@ function ReportActionItemMessageEdit(props) {
         }
 
         return () => {
+            ReportActionComposeFocusManager.clear();
+
             // Skip if the current report action is not active
             if (!isActive()) {
                 return;
@@ -305,11 +324,6 @@ function ReportActionItemMessageEdit(props) {
         [deleteDraft, isKeyboardShown, isSmallScreenWidth, publishDraft],
     );
 
-    /**
-     * Focus the composer text input
-     */
-    const focus = focusWithDelay(textInputRef.current);
-
     return (
         <>
             <View style={[styles.chatItemMessage, styles.flexRow]}>
@@ -365,6 +379,7 @@ function ReportActionItemMessageEdit(props) {
                                 setIsFocused(true);
                                 reportScrollManager.scrollToIndex({animated: true, index: props.index}, true);
                                 setShouldShowComposeInputKeyboardAware(false);
+                                setUpComposeFocusManager();
 
                                 // Clear active report action when another action gets focused
                                 if (!EmojiPickerAction.isActive(props.action.reportActionID)) {
@@ -390,12 +405,14 @@ function ReportActionItemMessageEdit(props) {
                         <EmojiPickerButton
                             isDisabled={props.shouldDisableEmojiPicker}
                             onModalHide={() => {
-                                setIsFocused(true);
-                                focus(true);
+                                ReportActionComposeFocusManager.focus();
                             }}
                             onEmojiSelected={addEmojiToTextBox}
                             nativeID={emojiButtonID}
                             emojiPickerID={props.action.reportActionID}
+                            onPress={() => {
+                                setUpComposeFocusManager();
+                            }}
                         />
                     </View>