foc focus state

margelo · Aug 24, 2023 · 9b7c07b · 9b7c07b
1 parent 9826f49
commit 9b7c07b
Show file tree

Hide file tree

Showing 3 changed files with 18 additions and 5 deletions.
diff --git a/src/pages/home/report/ReportActionCompose/AttachmentPickerWithMenuItems.js b/src/pages/home/report/ReportActionCompose/AttachmentPickerWithMenuItems.js
@@ -73,7 +73,14 @@ const propTypes = {
     /** Called when the menu with the items is closed after it was open */
     onMenuClosed: PropTypes.func.isRequired,
 
+    /** Called when the add action button is pressed */
     onAddActionPressed: PropTypes.func.isRequired,
+
+    /** A ref for the add action button */
+    actionButtonRef: PropTypes.shape({
+        // eslint-disable-next-line react/forbid-prop-types
+        current: PropTypes.object,
+    }).isRequired,
 };
 
 const defaultProps = {
@@ -104,10 +111,10 @@ function AttachmentPickerWithMenuItems({
     onCanceledAttachmentPicker,
     onMenuClosed,
     onAddActionPressed,
+    actionButtonRef,
 }) {
     const {translate} = useLocalize();
     const {windowHeight} = useWindowDimensions();
-    const actionButtonRef = useRef(null);
 
     /**
      * Returns the list of IOU Options

diff --git a/src/pages/home/report/ReportActionCompose/ComposerWithSuggestions.js b/src/pages/home/report/ReportActionCompose/ComposerWithSuggestions.js
@@ -577,6 +577,7 @@ function ComposerWithSuggestions({
             focus,
             replaceSelectionWithText,
             prepareCommentAndResetComposer,
+            isFocused: () => textInputRef.current.isFocused(),
         }),
         [blur, focus, prepareCommentAndResetComposer, replaceSelectionWithText],
     );

diff --git a/src/pages/home/report/ReportActionCompose/ReportActionCompose.js b/src/pages/home/report/ReportActionCompose/ReportActionCompose.js
@@ -112,6 +112,7 @@ function ReportActionCompose({
     const navigation = useNavigation();
     const {isMediumScreenWidth, isSmallScreenWidth} = useWindowDimensions();
     const animatedRef = useAnimatedRef();
+    const actionButtonRef = useRef(null);
 
     /**
      * Updates the Highlight state of the composer
@@ -178,13 +179,13 @@ function ReportActionCompose({
         if (!isKeyboardVisibleWhenShowingModalRef.current) {
             return;
         }
-        focus(true);
+        composerRef.current.focus(true);
         isKeyboardVisibleWhenShowingModalRef.current = false;
-    }, [focus]);
+    }, []);
 
     const onAddActionPressed = useCallback(() => {
         if (!willBlurTextInputOnTapOutside) {
-            isKeyboardVisibleWhenShowingModalRef.current = textInputRef.current.isFocused();
+            isKeyboardVisibleWhenShowingModalRef.current = composerRef.current.isFocused();
         }
         composerRef.current.blur();
     }, []);
@@ -257,9 +258,12 @@ function ReportActionCompose({
         isNextModalWillOpenRef.current = true;
     }, []);
 
-    const onBlur = useCallback(() => {
+    const onBlur = useCallback((e) => {
         setIsFocused(false);
         suggestionsRef.current.resetSuggestions();
+        if (e.relatedTarget && e.relatedTarget === actionButtonRef.current) {
+            isKeyboardVisibleWhenShowingModalRef.current = true;
+        }
     }, []);
 
     const onFocus = useCallback(() => {
@@ -337,6 +341,7 @@ function ReportActionCompose({
                                     onCanceledAttachmentPicker={restoreKeyboardState}
                                     onMenuClosed={restoreKeyboardState}
                                     onAddActionPressed={onAddActionPressed}
+                                    actionButtonRef={actionButtonRef}
                                 />
                                 <ComposerWithSuggestions
                                     ref={composerRef}