Merge pull request #23181 from bernhardoj/fix/21739-composer-focus-li…

…stener Setup the compose focus manager on screen focus
Expensify · Jul 24, 2023 · 9dd3a3f · 9dd3a3f
2 parents 13b7df9 + c7e737a
commit 9dd3a3f
Showing 1 changed file with 17 additions and 11 deletions.
diff --git a/src/pages/home/report/ReportActionCompose.js b/src/pages/home/report/ReportActionCompose.js
@@ -242,19 +242,13 @@ class ReportActionCompose extends React.Component {
     }
 
     componentDidMount() {
-        // This callback is used in the contextMenuActions to manage giving focus back to the compose input.
-        // TODO: we should clean up this convoluted code and instead move focus management to something like ReportFooter.js or another higher up component
-        ReportActionComposeFocusManager.onComposerFocus(() => {
-            if (!this.willBlurTextInputOnTapOutside || !this.props.isFocused) {
-                return;
-            }
-
-            this.focus(false);
-        });
-
         this.unsubscribeNavigationBlur = this.props.navigation.addListener('blur', () => KeyDownListener.removeKeyDownPressListner(this.focusComposerOnKeyPress));
-        this.unsubscribeNavigationFocus = this.props.navigation.addListener('focus', () => KeyDownListener.addKeyDownPressListner(this.focusComposerOnKeyPress));
+        this.unsubscribeNavigationFocus = this.props.navigation.addListener('focus', () => {
+            KeyDownListener.addKeyDownPressListner(this.focusComposerOnKeyPress);
+            this.setUpComposeFocusManager();
+        });
         KeyDownListener.addKeyDownPressListner(this.focusComposerOnKeyPress);
+        this.setUpComposeFocusManager();
 
         this.updateComment(this.comment);
 
@@ -313,6 +307,18 @@ class ReportActionCompose extends React.Component {
         this.calculateMentionSuggestion();
     }
 
+    setUpComposeFocusManager() {
+        // This callback is used in the contextMenuActions to manage giving focus back to the compose input.
+        // TODO: we should clean up this convoluted code and instead move focus management to something like ReportFooter.js or another higher up component
+        ReportActionComposeFocusManager.onComposerFocus(() => {
+            if (!this.willBlurTextInputOnTapOutside || !this.props.isFocused) {
+                return;
+            }
+
+            this.focus(false);
+        });
+    }
+
     getDefaultSuggestionsValues() {
         return {
             suggestedEmojis: [],