Merge pull request #16381 from situchan/fix/15276-search-focus-shortcut

navigate to Search page after fully closing modal on keyboard shortcut

src/components/EmojiPicker/EmojiPicker.js

@@ -78,13 +78,19 @@ class EmojiPicker extends React.Component {
         }
     }
 
-    hideEmojiPicker() {
+    /**
+     * Hide the emoji picker menu.
+     *
+     * @param {Boolean} isNavigating
+     */
+    hideEmojiPicker(isNavigating) {
+        if (isNavigating) { this.onModalHide = () => {}; }
         this.emojiPopoverAnchor = null;
         this.setState({isEmojiPickerVisible: false});
     }
 
     /**
-     * Show the ReportActionContextMenu modal popover.
+     * Show the emoji picker menu.
      *
      * @param {Function} [onModalHide=() => {}] - Run a callback when Modal hides.
      * @param {Function} [onEmojiSelected=() => {}] - Run a callback when Emoji selected.

src/components/Modal/BaseModal.js

@@ -65,6 +65,7 @@ class BaseModal extends PureComponent {
         if (callHideCallback) {
             this.props.onModalHide();
         }
+        Modal.onModalDidClose();
     }
 
     render() {

src/libs/Navigation/AppNavigator/AuthScreens.js

@@ -126,12 +126,10 @@ class AuthScreens extends React.Component {
         // the chat switcher, or new group chat
         // based on the key modifiers pressed and the operating system
         this.unsubscribeSearchShortcut = KeyboardShortcut.subscribe(searchShortcutConfig.shortcutKey, () => {
-            Modal.close();
-            Navigation.navigate(ROUTES.SEARCH);
+            Modal.close(() => Navigation.navigate(ROUTES.SEARCH));
         }, searchShortcutConfig.descriptionKey, searchShortcutConfig.modifiers, true);
         this.unsubscribeGroupShortcut = KeyboardShortcut.subscribe(groupShortcutConfig.shortcutKey, () => {
-            Modal.close();
-            Navigation.navigate(ROUTES.NEW_GROUP);
+            Modal.close(() => Navigation.navigate(ROUTES.NEW_GROUP));
         }, groupShortcutConfig.descriptionKey, groupShortcutConfig.modifiers, true);
     }
 

src/libs/actions/Modal.js

@@ -2,6 +2,7 @@ import Onyx from 'react-native-onyx';
 import ONYXKEYS from '../../ONYXKEYS';
 
 let closeModal;
+let onModalClose;
 
 /**
  * Allows other parts of the app to call modal close function
@@ -12,9 +13,27 @@ function setCloseModal(onClose) {
     closeModal = onClose;
 }
 
-function close() {
-    if (!closeModal) { return; }
-    closeModal();
+/**
+ * Close modal in other parts of the app
+ *
+ * @param {Function} [onModalCloseCallback]
+ * @param {Boolean} isNavigating
+ */
+function close(onModalCloseCallback, isNavigating = true) {
+    if (!closeModal) {
+        // If modal is already closed, no need to wait for modal close. So immediately call callback.
+        if (onModalCloseCallback) { onModalCloseCallback(); }
+        onModalClose = null;
+        return;
+    }
+    onModalClose = onModalCloseCallback;
+    closeModal(isNavigating);
+}
+
+function onModalDidClose() {
+    if (!onModalClose) { return; }
+    onModalClose();
+    onModalClose = null;
 }
 
 /**
@@ -39,6 +58,7 @@ function willAlertModalBecomeVisible(isVisible) {
 export {
     setCloseModal,
     close,
+    onModalDidClose,
     setModalVisibility,
     willAlertModalBecomeVisible,
 };