fix: 8329: Resolve fabmenu open multiple time

src/libs/actions/WelcomeActions.js

@@ -45,9 +45,9 @@ Onyx.connect({
  *
  * @param {Object} params
  * @param {Object} params.routes
- * @param {Function} params.toggleCreateMenu
+ * @param {Function} params.hideCreateMenu
  */
-function show({routes, toggleCreateMenu}) {
+function show({routes, hideCreateMenu}) {
     // NOTE: This setTimeout is required due to a bug in react-navigation where modals do not display properly in a drawerContent
     // This is a short-term workaround, see this issue for updates on a long-term solution: https://github.com/Expensify/App/issues/5296
     setTimeout(() => {
@@ -72,10 +72,10 @@ function show({routes, toggleCreateMenu}) {
         const exitingToWorkspaceRoute = lodashGet(loginWithShortLivedTokenRoute, 'params.exitTo', '') === 'workspace/new';
         const isDisplayingWorkspaceRoute = topRouteName.toLowerCase().includes('workspace') || exitingToWorkspaceRoute;
 
-        // It's also possible that we already have a workspace policy. In either case we will not toggle the menu but do still want to set the NVP in this case
+        // It's also possible that we already have a workspace policy. In either case we will not hide the menu but do still want to set the NVP in this case
         // since the user does not need to create a workspace.
         if (!Policy.isAdminOfFreePolicy(allPolicies) && !isDisplayingWorkspaceRoute) {
-            toggleCreateMenu();
+            hideCreateMenu();
         }
     }, 1500);
 }

src/pages/home/sidebar/SidebarScreen.js

@@ -43,10 +43,10 @@ class SidebarScreen extends Component {
     constructor(props) {
         super(props);
 
-        this.onCreateMenuItemSelected = this.onCreateMenuItemSelected.bind(this);
-        this.toggleCreateMenu = this.toggleCreateMenu.bind(this);
+        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 = {
             isCreateMenuActive: false,
@@ -58,14 +58,16 @@ class SidebarScreen extends Component {
         Timing.start(CONST.TIMING.SIDEBAR_LOADED, true);
 
         const routes = lodashGet(this.props.navigation.getState(), 'routes', []);
-        WelcomeAction.show({routes, toggleCreateMenu: this.toggleCreateMenu});
+        WelcomeAction.show({routes, hideCreateMenu: this.hideCreateMenu});
     }
 
     /**
-     * Method called when a Create Menu item is selected.
+     * Method called when we click the floating action button
      */
-    onCreateMenuItemSelected() {
-        this.toggleCreateMenu();
+    showCreateMenu() {
+        this.setState({
+            isCreateMenuActive: true,
+        });
     }
 
     /**
@@ -76,16 +78,14 @@ class SidebarScreen extends Component {
     }
 
     /**
-     * Method called when we click the floating action button
-     * will trigger the animation
      * 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
      */
-    toggleCreateMenu() {
-        this.setState(state => ({
-            isCreateMenuActive: !state.isCreateMenuActive,
-        }));
+    hideCreateMenu() {
+        this.setState({
+            isCreateMenuActive: false,
+        });
     }
 
     /**
@@ -117,14 +117,14 @@ class SidebarScreen extends Component {
                                 accessibilityLabel={this.props.translate('sidebarScreen.fabNewChat')}
                                 accessibilityRole="button"
                                 isActive={this.state.isCreateMenuActive}
-                                onPress={this.toggleCreateMenu}
+                                onPress={this.showCreateMenu}
                             />
                         </View>
                         <PopoverMenu
-                            onClose={this.toggleCreateMenu}
+                            onClose={this.hideCreateMenu}
                             isVisible={this.state.isCreateMenuActive}
                             anchorPosition={styles.createMenuPositionSidebar}
-                            onItemSelected={this.onCreateMenuItemSelected}
+                            onItemSelected={this.hideCreateMenu}
                             fromSidebarMediumScreen={!this.props.isSmallScreenWidth}
                             menuItems={[
                                 {