Merge pull request #12655 from aimane-chnaif/fix-11229-11708

prevent FAB menu and other page showing simultaneously

src/pages/home/sidebar/SidebarLinks.js

@@ -32,9 +32,6 @@ const propTypes = {
     /** Toggles the navigation menu open and closed */
     onLinkClick: PropTypes.func.isRequired,
 
-    /** Navigates to settings and hides sidebar */
-    onAvatarClick: PropTypes.func.isRequired,
-
     /** Safe area insets required for mobile devices margins */
     insets: safeAreaInsetPropTypes.isRequired,
 
@@ -83,10 +80,45 @@ const defaultProps = {
 };
 
 class SidebarLinks extends React.Component {
+    constructor(props) {
+        super(props);
+
+        this.showSearchPage = this.showSearchPage.bind(this);
+        this.showSettingsPage = this.showSettingsPage.bind(this);
+        this.showReportPage = this.showReportPage.bind(this);
+    }
+
     showSearchPage() {
+        if (this.props.isCreateMenuOpen) {
+            // Prevent opening Search page when click Search icon quickly after clicking FAB icon
+            return;
+        }
         Navigation.navigate(ROUTES.SEARCH);
     }
 
+    showSettingsPage() {
+        if (this.props.isCreateMenuOpen) {
+            // Prevent opening Settings page when click profile avatar quickly after clicking FAB icon
+            return;
+        }
+        Navigation.navigate(ROUTES.SETTINGS);
+    }
+
+    /**
+     * Show Report page with selected report id
+     *
+     * @param {Object} option
+     * @param {String} option.reportID
+     */
+    showReportPage(option) {
+        if (this.props.isCreateMenuOpen) {
+            // Prevent opening Report page when click LHN row quickly after clicking FAB icon
+            return;
+        }
+        Navigation.navigate(ROUTES.getReportRoute(option.reportID));
+        this.props.onLinkClick();
+    }
+
     render() {
         // Wait until the personalDetails are actually loaded before displaying the LHN
         if (_.isEmpty(this.props.personalDetails)) {
@@ -129,7 +161,7 @@ class SidebarLinks extends React.Component {
                     <TouchableOpacity
                         accessibilityLabel={this.props.translate('sidebarScreen.buttonMySettings')}
                         accessibilityRole="button"
-                        onPress={this.props.onAvatarClick}
+                        onPress={this.showSettingsPage}
                     >
                         <AvatarWithIndicator
                             source={this.props.currentUserPersonalDetails.avatar}
@@ -147,10 +179,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={this.showReportPage}
                         shouldDisableFocusOptions={this.props.isSmallScreenWidth}
                         optionMode={this.props.priorityMode === CONST.PRIORITY_MODE.GSD ? 'compact' : 'default'}
                         onLayout={() => {

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

@@ -8,6 +8,7 @@ import SidebarLinks from '../SidebarLinks';
 import PopoverMenu from '../../../../components/PopoverMenu';
 import FloatingActionButton from '../../../../components/FloatingActionButton';
 import ScreenWrapper from '../../../../components/ScreenWrapper';
+import compose from '../../../../libs/compose';
 import Navigation from '../../../../libs/Navigation/Navigation';
 import ROUTES from '../../../../ROUTES';
 import Timing from '../../../../libs/actions/Timing';
@@ -19,6 +20,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 = {
@@ -46,7 +48,6 @@ class BaseSidebarScreen extends Component {
 
         this.hideCreateMenu = this.hideCreateMenu.bind(this);
         this.startTimer = this.startTimer.bind(this);
-        this.navigateToSettings = this.navigateToSettings.bind(this);
         this.showCreateMenu = this.showCreateMenu.bind(this);
 
         this.state = {
@@ -62,29 +63,79 @@ class BaseSidebarScreen extends Component {
         Welcome.show({routes, showCreateMenu: this.showCreateMenu});
     }
 
+    componentDidUpdate(prevProps) {
+        if (!this.didScreenBecomeInactive(prevProps)) {
+            return;
+        }
+
+        // Hide menu manually when other pages are opened using shortcut key
+        this.hideCreateMenu();
+    }
+
+    /**
+     * Check if LHN status changed from active to inactive.
+     * Used to close already opened FAB menu when open any other pages (i.e. Press Command + K on web).
+     *
+     * @param {Object} prevProps
+     * @return {Boolean}
+     */
+    didScreenBecomeInactive(prevProps) {
+        // When the Drawer gets closed and ReportScreen is shown
+        if (!this.props.isDrawerOpen && prevProps.isDrawerOpen) {
+            return true;
+        }
+
+        // When any other page is opened over LHN
+        if (!this.props.isFocused && prevProps.isFocused) {
+            return true;
+        }
+
+        return false;
+    }
+
+    /**
+     * Check if LHN is inactive.
+     * Used to prevent FAB menu showing after opening any other pages.
+     *
+     * @return {Boolean}
+     */
+    isScreenInactive() {
+        // When drawer is closed and Report page is open
+        if (this.props.isSmallScreenWidth && !this.props.isDrawerOpen) {
+            return true;
+        }
+
+        // When any other page is open
+        if (!this.props.isFocused) {
+            return true;
+        }
+
+        return false;
+    }
+
     /**
      * Method called when we click the floating action button
      */
     showCreateMenu() {
+        if (this.isScreenInactive()) {
+            // Prevent showing menu when click FAB icon quickly after opening other pages
+            return;
+        }
         this.setState({
             isCreateMenuActive: true,
         });
         this.props.onShowCreateMenu();
     }
 
-    /**
-     * Method called when avatar is clicked
-     */
-    navigateToSettings() {
-        Navigation.navigate(ROUTES.SETTINGS);
-    }
-
     /**
      * Method called either when:
      * Pressing the floating action button to open the CreateMenu modal
      * 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,
@@ -113,9 +164,9 @@ class BaseSidebarScreen extends Component {
                             <SidebarLinks
                                 onLinkClick={this.startTimer}
                                 insets={insets}
-                                onAvatarClick={this.navigateToSettings}
                                 isSmallScreenWidth={this.props.isSmallScreenWidth}
                                 isDrawerOpen={this.props.isDrawerOpen}
+                                isCreateMenuOpen={this.state.isCreateMenuActive}
                                 reportIDFromRoute={this.props.reportIDFromRoute}
                             />
                             <FloatingActionButton
@@ -193,4 +244,7 @@ class BaseSidebarScreen extends Component {
 BaseSidebarScreen.propTypes = propTypes;
 BaseSidebarScreen.defaultProps = defaultProps;
 
-export default withDrawerState(BaseSidebarScreen);
+export default compose(
+    withDrawerState,
+    withNavigationFocus,
+)(BaseSidebarScreen);

tests/utils/LHNTestUtils.js

@@ -155,7 +155,6 @@ function getDefaultRenderedSidebarLinks(reportIDFromRoute = '') {
                         right: 0,
                         bottom: 0,
                     }}
-                    onAvatarClick={() => {}}
                     isSmallScreenWidth={false}
                     reportIDFromRoute={reportIDFromRoute}
                 />