fix: search header flickering on selection mode

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;
@@ -335,6 +335,11 @@ function Search({queryJSON, onSearchListScroll, contentContainerStyle}: SearchPr
             onTurnOnSelectionMode={(item) => item && toggleTransaction(item)}
             onCheckboxPress={toggleTransaction}
             onSelectAll={toggleAllTransactions}
+            isSelected={(item) =>
+                status !== CONST.SEARCH.STATUS.EXPENSE.ALL
+                    ? (item as ReportListItemType).transactions.some((transaction) => selectedTransactions[transaction.keyForList]?.isSelected)
+                    : !!item.isSelected
+            }
             customListHeader={
                 !isLargeScreenWidth ? null : (
                     <SearchTableHeader
@@ -348,6 +353,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

src/pages/workspace/invoices/WorkspaceInvoiceVBASection.tsx

@@ -16,44 +16,16 @@ import useResponsiveLayout from '@hooks/useResponsiveLayout';
 import useThemeStyles from '@hooks/useThemeStyles';
 import useWindowDimensions from '@hooks/useWindowDimensions';
 import getClickedTargetLocation from '@libs/getClickedTargetLocation';
-<<<<<<< HEAD
 import * as PaymentUtils from '@libs/PaymentUtils';
 import PaymentMethodList from '@pages/settings/Wallet/PaymentMethodList';
-=======
-import Navigation from '@libs/Navigation/Navigation';
-import * as PaymentUtils from '@libs/PaymentUtils';
-import PaymentMethodList from '@pages/settings/Wallet/PaymentMethodList';
-import type {FormattedSelectedPaymentMethodIcon} from '@pages/settings/Wallet/WalletPage/types';
->>>>>>> be90481835 (integrate bank accounts logic)
 import variables from '@styles/variables';
 import * as BankAccounts from '@userActions/BankAccounts';
 import * as PaymentMethods from '@userActions/PaymentMethods';
 import CONST from '@src/CONST';
 import ONYXKEYS from '@src/ONYXKEYS';
-<<<<<<< HEAD
-import type {AccountData} from '@src/types/onyx';
-import {isEmptyObject} from '@src/types/utils/EmptyObject';
-=======
-import ROUTES from '@src/ROUTES';
 import type {AccountData} from '@src/types/onyx';
 import {isEmptyObject} from '@src/types/utils/EmptyObject';
 
-type FormattedSelectedPaymentMethod = {
-    title: string;
-    icon?: FormattedSelectedPaymentMethodIcon;
-    description?: string;
-    type?: string;
-};
-
-type PaymentMethodState = {
-    isSelectedPaymentMethodDefault: boolean;
-    selectedPaymentMethod: AccountData;
-    formattedSelectedPaymentMethod: FormattedSelectedPaymentMethod;
-    methodID: string | number;
-    selectedPaymentMethodType: string;
-};
->>>>>>> be90481835 (integrate bank accounts logic)
-
 type WorkspaceInvoiceVBASectionProps = {
     /** The policy ID currently being configured */
     policyID: string;
@@ -66,54 +38,24 @@ function WorkspaceInvoiceVBASection({policyID}: WorkspaceInvoiceVBASectionProps)
     const {translate} = useLocalize();
     const [policy] = useOnyx(`${ONYXKEYS.COLLECTION.POLICY}${policyID}`);
     const [bankAccountList] = useOnyx(ONYXKEYS.BANK_ACCOUNT_LIST);
-<<<<<<< HEAD
     const {paymentMethod, setPaymentMethod, resetSelectedPaymentMethodData} = usePaymentMethodState();
-=======
-    const [cardList] = useOnyx(ONYXKEYS.CARD_LIST);
-    const [userWallet] = useOnyx(ONYXKEYS.USER_WALLET);
-    const [fundList] = useOnyx(ONYXKEYS.FUND_LIST);
->>>>>>> be90481835 (integrate bank accounts logic)
     const addPaymentMethodAnchorRef = useRef(null);
     const paymentMethodButtonRef = useRef<HTMLDivElement | null>(null);
     const [shouldShowAddPaymentMenu, setShouldShowAddPaymentMenu] = useState(false);
     const [showConfirmDeleteModal, setShowConfirmDeleteModal] = useState(false);
     const [shouldShowDefaultDeleteMenu, setShouldShowDefaultDeleteMenu] = useState(false);
-<<<<<<< HEAD
-=======
-    const [paymentMethod, setPaymentMethod] = useState<PaymentMethodState>({
-        isSelectedPaymentMethodDefault: false,
-        selectedPaymentMethod: {},
-        formattedSelectedPaymentMethod: {
-            title: '',
-        },
-        methodID: '',
-        selectedPaymentMethodType: '',
-    });
->>>>>>> be90481835 (integrate bank accounts logic)
     const [anchorPosition, setAnchorPosition] = useState({
         anchorPositionHorizontal: 0,
         anchorPositionVertical: 0,
         anchorPositionTop: 0,
         anchorPositionRight: 0,
     });
-<<<<<<< HEAD
     const hasBankAccount = !isEmptyObject(bankAccountList);
     const shouldShowEmptyState = !hasBankAccount;
     // Determines whether or not the modal popup is mounted from the bottom of the screen instead of the side mount on Web or Desktop screens
     const isPopoverBottomMount = anchorPosition.anchorPositionTop === 0 || shouldUseNarrowLayout;
     const shouldShowMakeDefaultButton = !paymentMethod.isSelectedPaymentMethodDefault;
     const transferBankAccountID = policy?.invoice?.bankAccount?.transferBankAccountID;
-=======
-    const hasBankAccount = !isEmptyObject(bankAccountList) || !isEmptyObject(fundList);
-    const hasWallet = !isEmptyObject(userWallet);
-    const hasAssignedCard = !isEmptyObject(cardList);
-    const shouldShowEmptyState = !hasBankAccount && !hasWallet && !hasAssignedCard;
-    // Determines whether or not the modal popup is mounted from the bottom of the screen instead of the side mount on Web or Desktop screens
-    const isPopoverBottomMount = anchorPosition.anchorPositionTop === 0 || shouldUseNarrowLayout;
-    const shouldShowMakeDefaultButton =
-        !paymentMethod.isSelectedPaymentMethodDefault &&
-        !(paymentMethod.formattedSelectedPaymentMethod.type === CONST.PAYMENT_METHODS.PERSONAL_BANK_ACCOUNT && paymentMethod.selectedPaymentMethod.type === CONST.BANK_ACCOUNT.TYPE.BUSINESS);
->>>>>>> be90481835 (integrate bank accounts logic)
 
     /**
      * Set position of the payment menu
@@ -170,11 +112,7 @@ function WorkspaceInvoiceVBASection({policyID}: WorkspaceInvoiceVBASectionProps)
                 };
             }
             setPaymentMethod({
-<<<<<<< HEAD
                 isSelectedPaymentMethodDefault: transferBankAccountID === methodID,
-=======
-                isSelectedPaymentMethodDefault: !!isDefault,
->>>>>>> be90481835 (integrate bank accounts logic)
                 selectedPaymentMethod: account ?? {},
                 selectedPaymentMethodType: accountType,
                 formattedSelectedPaymentMethod,
@@ -211,7 +149,6 @@ function WorkspaceInvoiceVBASection({policyID}: WorkspaceInvoiceVBASectionProps)
     }, [paymentMethod.selectedPaymentMethod.bankAccountID, paymentMethod.selectedPaymentMethodType]);
 
     const makeDefaultPaymentMethod = useCallback(() => {
-<<<<<<< HEAD
         // Find the previous default payment method so we can revert if the MakeDefaultPaymentMethod command errors
         const paymentMethods = PaymentUtils.formatPaymentMethods(bankAccountList ?? {}, {}, styles);
         const previousPaymentMethod = paymentMethods.find((method) => !!method.isDefault);
@@ -220,55 +157,12 @@ function WorkspaceInvoiceVBASection({policyID}: WorkspaceInvoiceVBASectionProps)
             PaymentMethods.setInvoicingTransferBankAccount(currentPaymentMethod?.methodID ?? -1, policyID, previousPaymentMethod?.methodID ?? -1);
         }
     }, [bankAccountList, styles, paymentMethod.selectedPaymentMethodType, paymentMethod.methodID, policyID]);
-=======
-        const paymentCardList = fundList ?? {};
-        // Find the previous default payment method so we can revert if the MakeDefaultPaymentMethod command errors
-        const paymentMethods = PaymentUtils.formatPaymentMethods(bankAccountList ?? {}, paymentCardList, styles);
-
-        const previousPaymentMethod = paymentMethods.find((method) => !!method.isDefault);
-        const currentPaymentMethod = paymentMethods.find((method) => method.methodID === paymentMethod.methodID);
-        if (paymentMethod.selectedPaymentMethodType === CONST.PAYMENT_METHODS.PERSONAL_BANK_ACCOUNT) {
-            PaymentMethods.makeDefaultPaymentMethod(paymentMethod.selectedPaymentMethod.bankAccountID ?? -1, 0, previousPaymentMethod, currentPaymentMethod);
-        } else if (paymentMethod.selectedPaymentMethodType === CONST.PAYMENT_METHODS.DEBIT_CARD) {
-            PaymentMethods.makeDefaultPaymentMethod(0, paymentMethod.selectedPaymentMethod.fundID ?? -1, previousPaymentMethod, currentPaymentMethod);
-        }
-    }, [
-        paymentMethod.methodID,
-        paymentMethod.selectedPaymentMethod.bankAccountID,
-        paymentMethod.selectedPaymentMethod.fundID,
-        paymentMethod.selectedPaymentMethodType,
-        bankAccountList,
-        fundList,
-        styles,
-    ]);
-
-    const resetSelectedPaymentMethodData = useCallback(() => {
-        // Reset to same values as in the constructor
-        setPaymentMethod({
-            isSelectedPaymentMethodDefault: false,
-            selectedPaymentMethod: {},
-            formattedSelectedPaymentMethod: {
-                title: '',
-            },
-            methodID: '',
-            selectedPaymentMethodType: '',
-        });
-    }, [setPaymentMethod]);
->>>>>>> be90481835 (integrate bank accounts logic)
 
     /**
      * Navigate to the appropriate payment type addition screen
      */
     const addPaymentMethodTypePressed = (paymentType: string) => {
         hideAddPaymentMenu();
-<<<<<<< HEAD
-=======
-
-        if (paymentType === CONST.PAYMENT_METHODS.DEBIT_CARD) {
-            Navigation.navigate(ROUTES.SETTINGS_ADD_DEBIT_CARD);
-            return;
-        }
->>>>>>> be90481835 (integrate bank accounts logic)
         if (paymentType === CONST.PAYMENT_METHODS.PERSONAL_BANK_ACCOUNT || paymentType === CONST.PAYMENT_METHODS.BUSINESS_BANK_ACCOUNT) {
             BankAccounts.openPersonalBankAccountSetupView();
             return;
@@ -289,22 +183,14 @@ function WorkspaceInvoiceVBASection({policyID}: WorkspaceInvoiceVBASectionProps)
                 shouldShowAddPaymentMethodButton={false}
                 shouldShowEmptyListMessage={false}
                 onPress={paymentMethodPressed}
-<<<<<<< HEAD
                 invoiceTransferBankAccountID={transferBankAccountID}
                 activePaymentMethodID={transferBankAccountID}
-=======
-                activePaymentMethodID={policy?.invoice?.bankAccount?.transferBankAccountID ?? ''}
->>>>>>> be90481835 (integrate bank accounts logic)
                 actionPaymentMethodType={shouldShowDefaultDeleteMenu ? paymentMethod.selectedPaymentMethodType : ''}
                 buttonRef={addPaymentMethodAnchorRef}
                 shouldEnableScroll={false}
                 style={[styles.mt5, hasBankAccount && [shouldUseNarrowLayout ? styles.mhn5 : styles.mhn8]]}
                 listItemStyle={shouldUseNarrowLayout ? styles.ph5 : styles.ph8}
             />
-<<<<<<< HEAD
-=======
-
->>>>>>> be90481835 (integrate bank accounts logic)
             <Popover
                 isVisible={shouldShowDefaultDeleteMenu}
                 onClose={hideDefaultDeleteMenu}
@@ -364,10 +250,6 @@ function WorkspaceInvoiceVBASection({policyID}: WorkspaceInvoiceVBASectionProps)
                     onModalHide={resetSelectedPaymentMethodData}
                 />
             </Popover>
-<<<<<<< HEAD
-=======
-
->>>>>>> be90481835 (integrate bank accounts logic)
             <AddPaymentMethodMenu
                 isVisible={shouldShowAddPaymentMenu}
                 onClose={hideAddPaymentMenu}