Merge pull request Expensify#50705 from daledah/fix/50555

fix: header flickering on selection mode and fix regressions

src/components/Search/index.tsx

@@ -93,7 +93,7 @@ function Search({queryJSON, onSearchListScroll, contentContainerStyle}: SearchPr
     const lastSearchResultsRef = useRef<OnyxEntry<SearchResults>>();
     const {setCurrentSearchHash, setSelectedTransactions, selectedTransactions, clearSelectedTransactions, setShouldShowStatusBarLoading, lastSearchType, setLastSearchType} =
         useSearchContext();
-    const {selectionMode} = useMobileSelectionMode();
+    const {selectionMode} = useMobileSelectionMode(false);
     const [offset, setOffset] = useState(0);
 
     const {type, status, sortBy, sortOrder, hash} = queryJSON;
@@ -400,6 +400,12 @@ function Search({queryJSON, onSearchListScroll, contentContainerStyle}: SearchPr
                     />
                 )
             }
+            isSelected={(item) =>
+                status !== CONST.SEARCH.STATUS.EXPENSE.ALL && SearchUtils.isReportListItemType(item)
+                    ? item.transactions.some((transaction) => selectedTransactions[transaction.keyForList]?.isSelected)
+                    : !!item.isSelected
+            }
+            shouldAutoTurnOff={false}
             onScroll={onSearchListScroll}
             canSelectMultiple={type !== CONST.SEARCH.DATA_TYPES.CHAT && canSelectMultiple}
             customListHeaderHeight={searchHeaderHeight}

src/components/SelectionListWithModal/index.tsx

@@ -1,5 +1,6 @@
+import {useIsFocused} from '@react-navigation/native';
 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 +15,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 +29,52 @@ 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 isFocused = useIsFocused();
+
+    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 (!isFocused) {
+            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, isFocused]);
+
+    useEffect(
+        () => () => {
+            if (selectionRef.current !== 0) {
+                return;
+            }
+            turnOffMobileSelectionMode();
+        },
+        [],
+    );
 
     const handleLongPressRow = (item: TItem) => {
         // eslint-disable-next-line @typescript-eslint/prefer-nullish-coalescing