Merge pull request #24481 from tienifr/fix/23898

Fix: Edit composer moves focus to main composer after press LHN menu item
Expensify · Aug 22, 2023 · 893c2a5 · 893c2a5
2 parents 6609308 + 9005a8a
commit 893c2a5
Show file tree

Hide file tree

Showing 4 changed files with 47 additions and 6 deletions.
diff --git a/src/components/Composer/index.js b/src/components/Composer/index.js
@@ -18,6 +18,7 @@ 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 */
@@ -79,6 +80,9 @@ 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,
+
     ...withLocalizePropTypes,
 
     ...windowDimensionsPropTypes,
@@ -106,6 +110,7 @@ const defaultProps = {
     setIsFullComposerAvailable: () => {},
     shouldCalculateCaretPosition: false,
     checkComposerVisibility: () => false,
+    isReportActionCompose: false,
 };
 
 /**
@@ -155,6 +160,7 @@ function Composer({
     setIsFullComposerAvailable,
     checkComposerVisibility,
     selection: selectionProp,
+    isReportActionCompose,
     ...props
 }) {
     const textRef = useRef(null);
@@ -370,6 +376,9 @@ function Composer({
         }
 
         return () => {
+            if (!isReportActionCompose) {
+                ReportActionComposeFocusManager.clear();
+            }
             unsubscribeFocus();
             unsubscribeBlur();
             document.removeEventListener('paste', handlePaste);
@@ -448,6 +457,18 @@ 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}
         </>

diff --git a/src/libs/ReportActionComposeFocusManager.js b/src/libs/ReportActionComposeFocusManager.js
@@ -2,16 +2,24 @@ import _ from 'underscore';
 import React from 'react';
 
 const composerRef = React.createRef();
+// There are two types of composer: general composer (edit composer) and main composer.
+// The general composer callback will take priority if it exists.
 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 +28,11 @@ function onComposerFocus(callback) {
  */
 function focus() {
     if (!_.isFunction(focusCallback)) {
+        if (!_.isFunction(mainComposerFocusCallback)) {
+            return;
+        }
+
+        mainComposerFocusCallback();
         return;
     }
 
@@ -29,9 +42,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;
+    }
 }
 
 /**

diff --git a/src/pages/home/report/ReportActionCompose.js b/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();
@@ -1197,6 +1197,7 @@ function ReportActionCompose({
                                         shouldClear={textInputShouldClear}
                                         onClear={() => setTextInputShouldClear(false)}
                                         isDisabled={isBlockedFromConcierge || disabled}
+                                        isReportActionCompose
                                         selection={selection}
                                         onSelectionChange={onSelectionChange}
                                         isFullComposerAvailable={isFullSizeComposerAvailable}

diff --git a/src/pages/home/report/ReportActionItemMessageEdit.js b/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.