Fix SearchRouter opening from keyboard shortcut

Expensify · Oct 4, 2024 · e21ed95 · e21ed95
1 parent 078420e
commit e21ed95
Show file tree

Hide file tree

Showing 2 changed files with 26 additions and 11 deletions.
diff --git a/src/components/Search/SearchRouter/SearchRouterContext.tsx b/src/components/Search/SearchRouter/SearchRouterContext.tsx
@@ -1,10 +1,11 @@
-import React, {useContext, useMemo, useState} from 'react';
+import React, {useContext, useMemo, useRef, useState} from 'react';
 import type ChildrenProps from '@src/types/utils/ChildrenProps';
 
 const defaultSearchContext = {
     isSearchRouterDisplayed: false,
     openSearchRouter: () => {},
     closeSearchRouter: () => {},
+    toggleSearchRouter: () => {},
 };
 
 type SearchRouterContext = typeof defaultSearchContext;
@@ -13,15 +14,33 @@ const Context = React.createContext<SearchRouterContext>(defaultSearchContext);
 
 function SearchRouterContextProvider({children}: ChildrenProps) {
     const [isSearchRouterDisplayed, setIsSearchRouterDisplayed] = useState(false);
+    const searchRouterDisplayedRef = useRef(false);
 
     const routerContext = useMemo(() => {
-        const openSearchRouter = () => setIsSearchRouterDisplayed(true);
-        const closeSearchRouter = () => setIsSearchRouterDisplayed(false);
+        const openSearchRouter = () => {
+            setIsSearchRouterDisplayed(true);
+            searchRouterDisplayedRef.current = true;
+        };
+        const closeSearchRouter = () => {
+            setIsSearchRouterDisplayed(false);
+            searchRouterDisplayedRef.current = false;
+        };
+
+        // There are callbacks that live outside of React render-loop and interact with SearchRouter
+        // So we need a function that is based on ref to correctly open/close it
+        const toggleSearchRouter = () => {
+            if (searchRouterDisplayedRef.current) {
+                closeSearchRouter();
+            } else {
+                openSearchRouter();
+            }
+        };
 
         return {
             isSearchRouterDisplayed,
             openSearchRouter,
             closeSearchRouter,
+            toggleSearchRouter,
         };
     }, [isSearchRouterDisplayed, setIsSearchRouterDisplayed]);
 

diff --git a/src/libs/Navigation/AppNavigator/AuthScreens.tsx b/src/libs/Navigation/AppNavigator/AuthScreens.tsx
@@ -234,7 +234,7 @@ function AuthScreens({session, lastOpenedPublicRoomID, initialLastUpdateIDApplie
     const screenOptions = getRootNavigatorScreenOptions(shouldUseNarrowLayout, styles, StyleUtils);
     const {canUseDefaultRooms} = usePermissions();
     const {activeWorkspaceID} = useActiveWorkspace();
-    const {openSearchRouter} = useSearchRouterContext();
+    const {toggleSearchRouter} = useSearchRouterContext();
 
     const onboardingModalScreenOptions = useMemo(() => screenOptions.onboardingModalNavigator(onboardingIsMediumOrLargerScreenWidth), [screenOptions, onboardingIsMediumOrLargerScreenWidth]);
     const onboardingScreenOptions = useMemo(
@@ -372,13 +372,9 @@ function AuthScreens({session, lastOpenedPublicRoomID, initialLastUpdateIDApplie
         const unsubscribeSearchShortcut = KeyboardShortcut.subscribe(
             searchShortcutConfig.shortcutKey,
             () => {
-                Modal.close(
-                    Session.checkIfActionIsAllowed(() => {
-                        openSearchRouter();
-                    }),
-                    true,
-                    true,
-                );
+                Session.checkIfActionIsAllowed(() => {
+                    toggleSearchRouter();
+                })();
             },
             shortcutsOverviewShortcutConfig.descriptionKey,
             shortcutsOverviewShortcutConfig.modifiers,