prevent FAB menu and other page showing simultaneously

src/pages/home/sidebar/SidebarLinks.js

@@ -84,9 +84,22 @@ const defaultProps = {
 
 class SidebarLinks extends React.Component {
     showSearchPage() {
+        if (this.props.isMenuOpen) {
+            // Prevent opening Search page when click Search icon quickly after clicking FAB icon
+            return;
+        }
         Navigation.navigate(ROUTES.SEARCH);
     }
 
+    showReportPage(reportID) {
+        if (this.props.isMenuOpen) {
+            // Prevent opening Report page when click LHN row quickly after clicking FAB icon
+            return;
+        }
+        Navigation.navigate(ROUTES.getReportRoute(reportID));
+        this.props.onLinkClick();
+    }
+
     render() {
         // Wait until the personalDetails are actually loaded before displaying the LHN
         if (_.isEmpty(this.props.personalDetails)) {
@@ -121,7 +134,7 @@ class SidebarLinks extends React.Component {
                             accessibilityLabel={this.props.translate('sidebarScreen.buttonSearch')}
                             accessibilityRole="button"
                             style={[styles.flexRow, styles.ph5]}
-                            onPress={this.showSearchPage}
+                            onPress={() => this.showSearchPage()}
                         >
                             <Icon src={Expensicons.MagnifyingGlass} />
                         </TouchableOpacity>
@@ -147,10 +160,7 @@ class SidebarLinks extends React.Component {
                         focusedIndex={_.findIndex(optionListItems, (
                             option => option.toString() === this.props.reportIDFromRoute
                         ))}
-                        onSelectRow={(option) => {
-                            Navigation.navigate(ROUTES.getReportRoute(option.reportID));
-                            this.props.onLinkClick();
-                        }}
+                        onSelectRow={option => this.showReportPage(option.reportID)}
                         shouldDisableFocusOptions={this.props.isSmallScreenWidth}
                         optionMode={this.props.priorityMode === CONST.PRIORITY_MODE.GSD ? 'compact' : 'default'}
                         onLayout={App.setSidebarLoaded}

src/pages/home/sidebar/SidebarScreen/BaseSidebarScreen.js

@@ -19,6 +19,7 @@ import Performance from '../../../../libs/Performance';
 import * as Welcome from '../../../../libs/actions/Welcome';
 import {sidebarPropTypes, sidebarDefaultProps} from './sidebarPropTypes';
 import withDrawerState from '../../../../components/withDrawerState';
+import withNavigationFocus from '../../../../components/withNavigationFocus';
 import KeyboardShortcutsModal from '../../../../components/KeyboardShortcutsModal';
 
 const propTypes = {
@@ -62,10 +63,51 @@ class BaseSidebarScreen extends Component {
         Welcome.show({routes, showCreateMenu: this.showCreateMenu});
     }
 
+    componentDidUpdate(prevProps) {
+        if (!this.didBecomeInactive(prevProps)) {
+            return;
+        }
+
+        // Hide menu manually when other pages are opened using shortcut key
+        this.hideCreateMenu();
+    }
+
+    didBecomeInactive(prevProps) {
+        // When Report page is just opened
+        if (!this.props.isDrawerOpen && prevProps.isDrawerOpen) {
+            return true;
+        }
+
+        // When other page is just opened
+        if (!this.props.isFocused && prevProps.isFocused) {
+            return true;
+        }
+
+        return false;
+    }
+
+    isInactive() {
+        // When drawer is closed and Report page is open
+        if (this.props.isSmallScreenWidth && !this.props.isDrawerOpen) {
+            return true;
+        }
+
+        // When other page is open
+        if (!this.props.isFocused) {
+            return true;
+        }
+
+        return false;
+    }
+
     /**
      * Method called when we click the floating action button
      */
     showCreateMenu() {
+        if (this.isInactive()) {
+            // Prevent showing menu when click FAB icon quickly after opening other pages
+            return;
+        }
         this.setState({
             isCreateMenuActive: true,
         });
@@ -76,6 +118,10 @@ class BaseSidebarScreen extends Component {
      * Method called when avatar is clicked
      */
     navigateToSettings() {
+        if (this.state.isCreateMenuActive) {
+            // Prevent opening Settings page when click profile avatar quickly after clicking FAB icon
+            return;
+        }
         Navigation.navigate(ROUTES.SETTINGS);
     }
 
@@ -85,6 +131,9 @@ class BaseSidebarScreen extends Component {
      * Selecting an item on CreateMenu or closing it by clicking outside of the modal component
      */
     hideCreateMenu() {
+        if (!this.state.isCreateMenuActive) {
+            return;
+        }
         this.props.onHideCreateMenu();
         this.setState({
             isCreateMenuActive: false,
@@ -116,6 +165,7 @@ class BaseSidebarScreen extends Component {
                                 onAvatarClick={this.navigateToSettings}
                                 isSmallScreenWidth={this.props.isSmallScreenWidth}
                                 isDrawerOpen={this.props.isDrawerOpen}
+                                isMenuOpen={this.state.isCreateMenuActive}
                                 reportIDFromRoute={this.props.reportIDFromRoute}
                             />
                             <FloatingActionButton
@@ -193,4 +243,4 @@ class BaseSidebarScreen extends Component {
 BaseSidebarScreen.propTypes = propTypes;
 BaseSidebarScreen.defaultProps = defaultProps;
 
-export default withDrawerState(BaseSidebarScreen);
+export default withDrawerState(withNavigationFocus(BaseSidebarScreen));