[CP Stag] Fix: Reports - "Customize your search" tooltip reappears while creating an expense

src/hooks/useBottomTabIsFocused.ts

@@ -1,12 +1,29 @@
+import type {EventArg, NavigationContainerEventMap} from '@react-navigation/native';
 import {useIsFocused, useNavigationState} from '@react-navigation/native';
+import {useEffect, useState} from 'react';
 import CENTRAL_PANE_SCREENS from '@libs/Navigation/AppNavigator/CENTRAL_PANE_SCREENS';
 import getTopmostCentralPaneRoute from '@libs/Navigation/getTopmostCentralPaneRoute';
 import getTopmostFullScreenRoute from '@libs/Navigation/getTopmostFullScreenRoute';
+import Navigation, {navigationRef} from '@libs/Navigation/Navigation';
 import type {CentralPaneName, FullScreenName, NavigationPartialRoute, RootStackParamList} from '@libs/Navigation/types';
 import SCREENS from '@src/SCREENS';
 import useResponsiveLayout from './useResponsiveLayout';
 
 const useBottomTabIsFocused = () => {
+    const [isScreenFocused, setIsScreenFocused] = useState(false);
+    useEffect(() => {
+        const listener = (event: EventArg<'state', false, NavigationContainerEventMap['state']['data']>) => {
+            const routName = Navigation.getRouteNameFromStateEvent(event);
+            if (routName === SCREENS.SEARCH.CENTRAL_PANE || routName === SCREENS.SETTINGS_CENTRAL_PANE || routName === SCREENS.HOME) {
+                setIsScreenFocused(true);
+                return;
+            }
+            setIsScreenFocused(false);
+        };
+        navigationRef.addListener('state', listener);
+        return () => navigationRef.removeListener('state', listener);
+    }, []);
+
     const {shouldUseNarrowLayout} = useResponsiveLayout();
     const isFocused = useIsFocused();
     const topmostFullScreenName = useNavigationState<RootStackParamList, NavigationPartialRoute<FullScreenName> | undefined>(getTopmostFullScreenRoute);
@@ -18,7 +35,7 @@ const useBottomTabIsFocused = () => {
     }
     // On the Search screen, isFocused returns false, but it is actually focused
     if (shouldUseNarrowLayout) {
-        return isFocused || topmostCentralPane?.name === SCREENS.SEARCH.CENTRAL_PANE;
+        return isFocused || isScreenFocused;
     }
     // On desktop screen sizes, isFocused always returns false, so we cannot rely on it alone to determine if the bottom tab is focused
     return isFocused || Object.keys(CENTRAL_PANE_SCREENS).includes(topmostCentralPane?.name ?? '');

src/pages/Search/SearchTypeMenuNarrow.tsx

@@ -1,4 +1,5 @@
-import React, {useCallback, useMemo, useRef, useState} from 'react';
+import type {EventArg, NavigationContainerEventMap} from '@react-navigation/native';
+import React, {useCallback, useEffect, useMemo, useRef, useState} from 'react';
 import {Animated, View} from 'react-native';
 import type {TextStyle, ViewStyle} from 'react-native';
 import {useOnyx} from 'react-native-onyx';
@@ -24,7 +25,7 @@ import useThemeStyles from '@hooks/useThemeStyles';
 import useWindowDimensions from '@hooks/useWindowDimensions';
 import * as SearchActions from '@libs/actions/Search';
 import getPlatform from '@libs/getPlatform';
-import Navigation from '@libs/Navigation/Navigation';
+import Navigation, {navigationRef} from '@libs/Navigation/Navigation';
 import {getAllTaxRates} from '@libs/PolicyUtils';
 import * as SearchQueryUtils from '@libs/SearchQueryUtils';
 import * as SearchUIUtils from '@libs/SearchUIUtils';
@@ -33,6 +34,7 @@ import * as Expensicons from '@src/components/Icon/Expensicons';
 import CONST from '@src/CONST';
 import ONYXKEYS from '@src/ONYXKEYS';
 import ROUTES from '@src/ROUTES';
+import SCREENS from '@src/SCREENS';
 import type {SearchTypeMenuItem} from './SearchTypeMenu';
 
 type SavedSearchMenuItem = MenuItemWithLink & {
@@ -77,8 +79,23 @@ function SearchTypeMenuNarrow({typeMenuItems, activeItemIndex, queryJSON, title,
     const openMenu = useCallback(() => setIsPopoverVisible(true), []);
     const closeMenu = useCallback(() => setIsPopoverVisible(false), []);
 
+    const [isScreenFocused, setIsScreenFocused] = useState(false);
+
+    useEffect(() => {
+        const listener = (event: EventArg<'state', false, NavigationContainerEventMap['state']['data']>) => {
+            if (Navigation.getRouteNameFromStateEvent(event) === SCREENS.SEARCH.CENTRAL_PANE) {
+                setIsScreenFocused(true);
+                return;
+            }
+            setIsScreenFocused(false);
+        };
+        navigationRef.addListener('state', listener);
+        return () => navigationRef.removeListener('state', listener);
+    }, []);
+
     const {renderProductTrainingTooltip, shouldShowProductTrainingTooltip, hideProductTrainingTooltip} = useProductTrainingContext(
         CONST.PRODUCT_TRAINING_TOOLTIP_NAMES.SEARCH_FILTER_BUTTON_TOOLTIP,
+        isScreenFocused,
     );
 
     const onPress = () => {