Fix: Edit composer moves focus to main composer after press LHN menu item

src/components/Composer/index.js

@@ -18,6 +18,8 @@ import Text from '../Text';
 import isEnterWhileComposition from '../../libs/KeyboardShortcut/isEnterWhileComposition';
 import CONST from '../../CONST';
 import withNavigation from '../withNavigation';
+import ReportActionComposeFocusManager from '../../libs/ReportActionComposeFocusManager';
+import willBlurTextInputOnTapOutside from '../../libs/willBlurTextInputOnTapOutside';
 
 const propTypes = {
     /** Maximum number of lines in the text input */
@@ -159,6 +161,8 @@ function Composer({
 }) {
     const textRef = useRef(null);
     const textInput = useRef(null);
+    const willBlurTextInputOnTapOutsideRef = useRef();
+    willBlurTextInputOnTapOutsideRef.current = willBlurTextInputOnTapOutside();
     const initialValue = defaultValue ? `${defaultValue}` : `${value || ''}`;
     const [numberOfLines, setNumberOfLines] = useState(numberOfLinesProp);
     const [selection, setSelection] = useState({
@@ -354,6 +358,14 @@ function Composer({
         updateNumberOfLines();
     }, [updateNumberOfLines]);
 
+    useEffect(
+        () => () => {
+            ReportActionComposeFocusManager.clear();
+            ReportActionComposeFocusManager.focus();
+        },
+        [],
+    );
+
     useEffect(() => {
         // we need to handle listeners on navigation focus/blur as Composer is not unmounting
         // when navigating away to different report
@@ -370,6 +382,8 @@ function Composer({
         }
 
         return () => {
+            ReportActionComposeFocusManager.clear();
+            ReportActionComposeFocusManager.focus();
             unsubscribeFocus();
             unsubscribeBlur();
             document.removeEventListener('paste', handlePaste);
@@ -448,6 +462,18 @@ function Composer({
                 numberOfLines={numberOfLines}
                 disabled={isDisabled}
                 onKeyPress={handleKeyPress}
+                onFocus={(e) => {
+                    ReportActionComposeFocusManager.onComposerFocus(() => {
+                        if (!willBlurTextInputOnTapOutsideRef.current || !textInput.current) {
+                            return;
+                        }
+
+                        textInput.current.focus();
+                    });
+                    if (props.onFocus) {
+                        props.onFocus(e);
+                    }
+                }}
             />
             {shouldCalculateCaretPosition && renderElementForCaretPosition}
         </>

src/libs/ReportActionComposeFocusManager.js

@@ -2,16 +2,23 @@ import _ from 'underscore';
 import React from 'react';
 
 const composerRef = React.createRef();
+// There are two types of composer: general composer (edit composer) and main composer
 let focusCallback = null;
+let mainComposerFocusCallback = null;
 
 /**
  * Register a callback to be called when focus is requested.
  * Typical uses of this would be call the focus on the ReportActionComposer.
  *
  * @param {Function} callback callback to register
+ * @param {Boolean} isMainComposer
  */
-function onComposerFocus(callback) {
-    focusCallback = callback;
+function onComposerFocus(callback, isMainComposer = false) {
+    if (isMainComposer) {
+        mainComposerFocusCallback = callback;
+    } else {
+        focusCallback = callback;
+    }
 }
 
 /**
@@ -20,6 +27,11 @@ function onComposerFocus(callback) {
  */
 function focus() {
     if (!_.isFunction(focusCallback)) {
+        if (!_.isFunction(mainComposerFocusCallback)) {
+            return;
+        }
+
+        mainComposerFocusCallback();
         return;
     }
 
@@ -29,9 +41,14 @@ function focus() {
 /**
  * Clear the registered focus callback
  *
+ * @param {Boolean} isMainComposer
  */
-function clear() {
-    focusCallback = null;
+function clear(isMainComposer = false) {
+    if (isMainComposer) {
+        mainComposerFocusCallback = null;
+    } else {
+        focusCallback = null;
+    }
 }
 
 /**

src/pages/home/report/ReportActionCompose.js

@@ -659,7 +659,7 @@ function ReportActionCompose({
             }
 
             focus(false);
-        });
+        }, true);
     }, [focus, isFocusedProp]);
 
     /**
@@ -970,7 +970,7 @@ function ReportActionCompose({
         }
 
         return () => {
-            ReportActionComposeFocusManager.clear();
+            ReportActionComposeFocusManager.clear(true);
 
             KeyDownListener.removeKeyDownPressListner(focusComposerOnKeyPress);
             unsubscribeNavigationBlur();

src/pages/home/report/ReportActionItemMessageEdit.js

@@ -219,6 +219,7 @@ function ReportActionItemMessageEdit(props) {
         debouncedSaveDraft.cancel();
         Report.saveReportActionDraft(props.reportID, props.action, '');
         ComposerActions.setShouldShowComposeInput(true);
+        ReportActionComposeFocusManager.clear();
         ReportActionComposeFocusManager.focus();
 
         // Scroll to the last comment after editing to make sure the whole comment is clearly visible in the report.