Merge pull request #49510 from daledah/fix/49084

fix: search header flickering on selection mode

Author: aldo-expensify

src/components/Search/index.tsx

@@ -91,8 +91,8 @@ function Search({queryJSON, onSearchListScroll, contentContainerStyle}: SearchPr
     const {isSmallScreenWidth, isLargeScreenWidth} = useResponsiveLayout();
     const navigation = useNavigation<StackNavigationProp<AuthScreensParamList>>();
     const lastSearchResultsRef = useRef<OnyxEntry<SearchResults>>();
+    const {selectionMode} = useMobileSelectionMode(false);
     const {setCurrentSearchHash, setSelectedTransactions, selectedTransactions, clearSelectedTransactions, setShouldShowStatusBarLoading} = useSearchContext();
-    const {selectionMode} = useMobileSelectionMode();
     const [offset, setOffset] = useState(0);
 
     const {type, status, sortBy, sortOrder, hash} = queryJSON;
@@ -379,6 +379,11 @@ function Search({queryJSON, onSearchListScroll, contentContainerStyle}: SearchPr
             onTurnOnSelectionMode={(item) => item && toggleTransaction(item)}
             onCheckboxPress={toggleTransaction}
             onSelectAll={toggleAllTransactions}
+            isSelected={(item) =>
+                status !== CONST.SEARCH.STATUS.EXPENSE.ALL && SearchUtils.isReportListItemType(item)
+                    ? item.transactions.some((transaction) => selectedTransactions[transaction.keyForList]?.isSelected)
+                    : !!item.isSelected
+            }
             customListHeader={
                 !isLargeScreenWidth ? null : (
                     <SearchTableHeader
@@ -392,6 +397,7 @@ function Search({queryJSON, onSearchListScroll, contentContainerStyle}: SearchPr
                     />
                 )
             }
+            shouldAutoTurnOff={false}
             onScroll={onSearchListScroll}
             canSelectMultiple={type !== CONST.SEARCH.DATA_TYPES.CHAT && canSelectMultiple}
             customListHeaderHeight={searchHeaderHeight}

src/components/SelectionListWithModal/index.tsx

@@ -1,5 +1,5 @@
 import type {ForwardedRef} from 'react';
-import React, {forwardRef, useEffect, useState} from 'react';
+import React, {forwardRef, useEffect, useRef, useState} from 'react';
 import * as Expensicons from '@components/Icon/Expensicons';
 import MenuItem from '@components/MenuItem';
 import Modal from '@components/Modal';
@@ -14,10 +14,12 @@ import CONST from '@src/CONST';
 type SelectionListWithModalProps<TItem extends ListItem> = BaseSelectionListProps<TItem> & {
     turnOnSelectionModeOnLongPress?: boolean;
     onTurnOnSelectionMode?: (item: TItem | null) => void;
+    shouldAutoTurnOff?: boolean;
+    isSelected?: (item: TItem) => boolean;
 };
 
 function SelectionListWithModal<TItem extends ListItem>(
-    {turnOnSelectionModeOnLongPress, onTurnOnSelectionMode, onLongPressRow, sections, ...rest}: SelectionListWithModalProps<TItem>,
+    {turnOnSelectionModeOnLongPress, onTurnOnSelectionMode, onLongPressRow, sections, shouldAutoTurnOff, isSelected, ...rest}: SelectionListWithModalProps<TItem>,
     ref: ForwardedRef<SelectionListHandle>,
 ) {
     const [isModalVisible, setIsModalVisible] = useState(false);
@@ -26,21 +28,47 @@ function SelectionListWithModal<TItem extends ListItem>(
     // We need to use isSmallScreenWidth instead of shouldUseNarrowLayout here because there is a race condition that causes shouldUseNarrowLayout to change indefinitely in this component
     // See https://github.com/Expensify/App/issues/48675 for more details
     const {isSmallScreenWidth} = useResponsiveLayout();
-    const {selectionMode} = useMobileSelectionMode(true);
+    const {selectionMode} = useMobileSelectionMode(shouldAutoTurnOff);
+    // Check if selection should be on when the modal is opened
+    const wasSelectionOnRef = useRef(false);
+    // Keep track of the number of selected items to determine if we should turn off selection mode
+    const selectionRef = useRef(0);
 
     useEffect(() => {
         // We can access 0 index safely as we are not displaying multiple sections in table view
-        const selectedItems = sections[0].data.filter((item) => item.isSelected);
+        const selectedItems = sections[0].data.filter((item) => {
+            if (isSelected) {
+                return isSelected(item);
+            }
+            return !!item.isSelected;
+        });
+        selectionRef.current = selectedItems.length;
+
         if (!isSmallScreenWidth) {
             if (selectedItems.length === 0) {
                 turnOffMobileSelectionMode();
             }
             return;
         }
+        if (!wasSelectionOnRef.current && selectedItems.length > 0) {
+            wasSelectionOnRef.current = true;
+        }
         if (selectedItems.length > 0 && !selectionMode?.isEnabled) {
             turnOnMobileSelectionMode();
+        } else if (selectedItems.length === 0 && selectionMode?.isEnabled && !wasSelectionOnRef.current) {
+            turnOffMobileSelectionMode();
         }
-    }, [sections, selectionMode, isSmallScreenWidth]);
+    }, [sections, selectionMode, isSmallScreenWidth, isSelected]);
+
+    useEffect(
+        () => () => {
+            if (selectionRef.current !== 0) {
+                return;
+            }
+            turnOffMobileSelectionMode();
+        },
+        [],
+    );
 
     const handleLongPressRow = (item: TItem) => {
         // eslint-disable-next-line @typescript-eslint/prefer-nullish-coalescing