Merge pull request Expensify#90292 from bernhardoj/fix/90028-saved-search-tooltip-doesnt-show

Fix saved search tooltip doesn't show for the first time

Author: JS00001

src/pages/Search/SearchTypeMenuWide.tsx

@@ -1,5 +1,5 @@
 import {useRoute} from '@react-navigation/native';
-import React, {useContext, useLayoutEffect, useRef, useState} from 'react';
+import React, {useContext, useEffect, useEffectEvent, useLayoutEffect, useRef, useState} from 'react';
 import {View} from 'react-native';
 // eslint-disable-next-line no-restricted-imports
 import type {NativeScrollEvent, NativeSyntheticEvent, ScrollView as RNScrollView} from 'react-native';
@@ -40,10 +40,10 @@ type SectionParams = {
     reportCounts: NonNullable<ReturnType<typeof todosReportCountsSelector>>;
     areAllSectionsExpanded: boolean;
     onItemPress: (query: string) => void;
-    onExpanded: (isExpanded: boolean) => void;
+    onCollapsed: (isCollapsed: boolean) => void;
 };
 
-function Section({section, hash, activeItemIndex, sectionStartIndex, reportCounts, areAllSectionsExpanded, onItemPress, onExpanded}: SectionParams) {
+function Section({section, hash, activeItemIndex, sectionStartIndex, reportCounts, areAllSectionsExpanded, onItemPress, onCollapsed}: SectionParams) {
     const {translate} = useLocalize();
     const expensifyIcons = useMemoizedLazyExpensifyIcons([
         'Basket',
@@ -64,14 +64,26 @@ function Section({section, hash, activeItemIndex, sectionStartIndex, reportCount
 
     const [isExpanded, setIsExpanded] = useState(true);
 
+    const onUnmount = useEffectEvent(() => {
+        if (isExpanded) {
+            return;
+        }
+        // When the section is removed/unmounted while collapsed,
+        // notify the parent that the section is no longer collapsed.
+        onCollapsed(false);
+    });
+
+    useEffect(() => {
+        return () => onUnmount();
+    }, []);
+
     return (
         <SearchTypeMenuAccordion
             isExpanded={isExpanded}
             onSectionHeaderPress={() => {
                 setIsExpanded((prevIsExpanded) => {
-                    const newValue = !prevIsExpanded;
-                    onExpanded(newValue);
-                    return newValue;
+                    onCollapsed(prevIsExpanded);
+                    return !prevIsExpanded;
                 });
             }}
             title={translate(section.translationPath)}
@@ -150,12 +162,11 @@ function SearchTypeMenuWide({queryJSON}: SearchTypeMenuProps) {
 
     const areSuggestedSearchesLoading = !isOffline && !isSearchDataLoaded && !isLoadingOnyxValue(isSearchDataLoadedResult);
 
-    const numberOfSections = nonExpenseReportsSections.length + 1;
-    const [expandedSectionCount, setExpandedSectionCount] = useState(numberOfSections);
-    const areAllSectionsExpanded = expandedSectionCount === numberOfSections;
+    const [collapsedSectionCount, setCollapsedSectionCount] = useState(0);
+    const areAllSectionsExpanded = collapsedSectionCount === 0;
 
-    const updateExpandedCount = (isExpanded: boolean) => {
-        setExpandedSectionCount((prevExpandedCount) => prevExpandedCount + (isExpanded ? 1 : -1));
+    const updateCollapsedCount = (isCollapsed: boolean) => {
+        setCollapsedSectionCount((prevCollapsedCount) => prevCollapsedCount + (isCollapsed ? 1 : -1));
     };
 
     return (
@@ -169,7 +180,7 @@ function SearchTypeMenuWide({queryJSON}: SearchTypeMenuProps) {
                     <Section
                         section={expenseReportsSection}
                         onItemPress={handleTypeMenuItemPress}
-                        onExpanded={updateExpandedCount}
+                        onCollapsed={updateCollapsedCount}
                         hash={hash}
                         sectionStartIndex={0}
                         activeItemIndex={activeItemIndex}
@@ -186,7 +197,7 @@ function SearchTypeMenuWide({queryJSON}: SearchTypeMenuProps) {
                             key={section.translationPath}
                             section={section}
                             onItemPress={handleTypeMenuItemPress}
-                            onExpanded={updateExpandedCount}
+                            onCollapsed={updateCollapsedCount}
                             hash={hash}
                             sectionStartIndex={sectionStartIndices.at(index + (expenseReportsSection ? 1 : 0)) ?? 0}
                             activeItemIndex={activeItemIndex}