Fix: Unable to select expense checkboxes after opening thread and moving expenses

src/components/MoneyRequestReportView/MoneyRequestReportActionsList.tsx

@@ -1,5 +1,5 @@
 /* eslint-disable rulesdir/prefer-early-return */
-import {useIsFocused, useRoute} from '@react-navigation/native';
+import {useFocusEffect, useIsFocused, useRoute} from '@react-navigation/native';
 import {isUserValidatedSelector} from '@selectors/Account';
 import {tierNameSelector} from '@selectors/UserWallet';
 import isEmpty from 'lodash/isEmpty';
@@ -204,10 +204,20 @@ function MoneyRequestReportActionsList({
     const [enableScrollToEnd, setEnableScrollToEnd] = useState<boolean>(false);
     const [lastActionEventId, setLastActionEventId] = useState<string>('');
 
-    const {selectedTransactionIDs} = useSearchStateContext();
-    const {setSelectedTransactions, clearSelectedTransactions} = useSearchActionsContext();
+    const {selectedTransactionIDs, currentSelectedTransactionReportID} = useSearchStateContext();
+    const {setSelectedTransactions, clearSelectedTransactions, setCurrentSelectedTransactionReportID} = useSearchActionsContext();
 
-    useFilterSelectedTransactions(transactions);
+    useFocusEffect(
+        useCallback(() => {
+            if (reportID && currentSelectedTransactionReportID !== reportID && selectedTransactionIDs.length > 0) {
+                clearSelectedTransactions(true);
+            }
+
+            setCurrentSelectedTransactionReportID(reportID);
+        }, [clearSelectedTransactions, currentSelectedTransactionReportID, reportID, selectedTransactionIDs.length, setCurrentSelectedTransactionReportID]),
+    );
+
+    useFilterSelectedTransactions(transactions, reportID);
 
     const isMobileSelectionModeEnabled = useMobileSelectionMode();
     const {showConfirmModal} = useConfirmModal();

src/components/Search/SearchContext.tsx

@@ -44,6 +44,7 @@ const defaultSearchContextData: SearchContextData = {
     currentSearchKey: undefined,
     currentSearchQueryJSON: undefined,
     currentSearchResults: undefined,
+    currentSelectedTransactionReportID: undefined,
     selectedTransactions: {},
     selectedTransactionIDs: [],
     selectedReports: [],
@@ -67,6 +68,7 @@ const defaultSearchStateContext: SearchStateContextValue = {
 
 const defaultSearchActionsContext: SearchActionsContextValue = {
     setLastSearchType: () => {},
+    setCurrentSelectedTransactionReportID: () => {},
     setSelectedTransactions: () => {},
     removeTransaction: () => {},
     clearSelectedTransactions: () => {},
@@ -211,6 +213,19 @@ function SearchContextProvider({children}: SearchContextProps) {
         }));
     };
 
+    const setCurrentSelectedTransactionReportID: SearchActionsContextValue['setCurrentSelectedTransactionReportID'] = (reportID) => {
+        setSearchContextData((prevState) => {
+            if (reportID === prevState.currentSelectedTransactionReportID) {
+                return prevState;
+            }
+
+            return {
+                ...prevState,
+                currentSelectedTransactionReportID: reportID,
+            };
+        });
+    };
+
     const clearSelectedTransactions: SearchActionsContextValue['clearSelectedTransactions'] = useCallback(
         (searchHashOrClearIDsFlag, shouldTurnOffSelectionMode = false) => {
             if (typeof searchHashOrClearIDsFlag === 'boolean') {
@@ -292,6 +307,7 @@ function SearchContextProvider({children}: SearchContextProps) {
     const searchActionsContextValue: SearchActionsContextValue = {
         removeTransaction,
         setSelectedTransactions,
+        setCurrentSelectedTransactionReportID,
         clearSelectedTransactions,
         setShouldShowFiltersBarLoading,
         setLastSearchType,

src/components/Search/types.ts

@@ -163,6 +163,7 @@ type SearchContextData = {
     currentSearchKey: SearchKey | undefined;
     currentSearchQueryJSON: SearchQueryJSON | undefined;
     currentSearchResults: SearchResults | undefined;
+    currentSelectedTransactionReportID: string | undefined;
     selectedTransactions: SelectedTransactions;
     selectedTransactionIDs: string[];
     selectedReports: SelectedReports[];
@@ -188,6 +189,7 @@ type SearchActionsContextValue = {
         (selectedTransactionIDs: string[], unused?: undefined): void;
         (selectedTransactions: SelectedTransactions, data: TransactionListItemType[] | TransactionGroupListItemType[] | ReportActionListItemType[] | TaskListItemType[]): void;
     };
+    setCurrentSelectedTransactionReportID: (reportID: string | undefined) => void;
     /** If you want to clear `selectedTransactionIDs`, pass `true` as the first argument */
     clearSelectedTransactions: {
         (hash?: number, shouldTurnOffSelectionMode?: boolean): void;

src/hooks/useFilterSelectedTransactions.ts

@@ -7,9 +7,10 @@ import type {Transaction} from '@src/types/onyx';
  * This is useful when transactions are deleted and we need to clean up the selection state.
  *
  * @param transactions - The current list of transactions
+ * @param reportID - The report that owns the current transaction list
  */
-function useFilterSelectedTransactions(transactions: Transaction[]) {
-    const {selectedTransactionIDs} = useSearchStateContext();
+function useFilterSelectedTransactions(transactions: Transaction[], reportID?: string) {
+    const {selectedTransactionIDs, currentSelectedTransactionReportID} = useSearchStateContext();
     const {setSelectedTransactions} = useSearchActionsContext();
 
     const transactionIDs = useMemo(() => transactions.map((transaction) => transaction.transactionID), [transactions]);
@@ -18,9 +19,13 @@ function useFilterSelectedTransactions(transactions: Transaction[]) {
         if (filteredSelectedTransactionIDs.length === selectedTransactionIDs.length) {
             return;
         }
+
+        if (reportID && currentSelectedTransactionReportID && currentSelectedTransactionReportID !== reportID) {
+            return;
+        }
+
         setSelectedTransactions(filteredSelectedTransactionIDs);
-        // eslint-disable-next-line react-hooks/exhaustive-deps
-    }, [filteredSelectedTransactionIDs]);
+    }, [currentSelectedTransactionReportID, filteredSelectedTransactionIDs, reportID, selectedTransactionIDs.length, setSelectedTransactions]);
 }
 
 export default useFilterSelectedTransactions;

tests/ui/CategoryListItemHeaderTest.tsx

@@ -26,6 +26,7 @@ const mockSearchStateContext = {
     currentSearchKey: undefined,
     currentSearchQueryJSON: undefined,
     currentSearchResults: undefined,
+    currentSelectedTransactionReportID: undefined,
     selectedReports: [],
     selectedTransactionIDs: [],
     selectedTransactions: {},
@@ -43,6 +44,7 @@ const mockSearchStateContext = {
 
 const mockSearchActionsContext = {
     setLastSearchType: jest.fn(),
+    setCurrentSelectedTransactionReportID: jest.fn(),
     setSelectedTransactions: jest.fn(),
     removeTransaction: jest.fn(),
     clearSelectedTransactions: jest.fn(),

tests/ui/MerchantListItemHeaderTest.tsx

@@ -26,6 +26,7 @@ const mockSearchStateContext = {
     currentSearchKey: undefined,
     currentSearchQueryJSON: undefined,
     currentSearchResults: undefined,
+    currentSelectedTransactionReportID: undefined,
     selectedReports: [],
     selectedTransactionIDs: [],
     selectedTransactions: {},
@@ -43,6 +44,7 @@ const mockSearchStateContext = {
 
 const mockSearchActionsContext = {
     setLastSearchType: jest.fn(),
+    setCurrentSelectedTransactionReportID: jest.fn(),
     setSelectedTransactions: jest.fn(),
     removeTransaction: jest.fn(),
     clearSelectedTransactions: jest.fn(),

tests/ui/MonthListItemHeaderTest.tsx

@@ -26,6 +26,7 @@ const mockSearchStateContext = {
     currentSearchKey: undefined,
     currentSearchQueryJSON: undefined,
     currentSearchResults: undefined,
+    currentSelectedTransactionReportID: undefined,
     selectedReports: [],
     selectedTransactionIDs: [],
     selectedTransactions: {},
@@ -43,6 +44,7 @@ const mockSearchStateContext = {
 
 const mockSearchActionsContext = {
     setLastSearchType: jest.fn(),
+    setCurrentSelectedTransactionReportID: jest.fn(),
     setSelectedTransactions: jest.fn(),
     removeTransaction: jest.fn(),
     clearSelectedTransactions: jest.fn(),

tests/ui/ReportListItemHeaderTest.tsx

@@ -30,6 +30,7 @@ const mockSearchStateContext = {
     currentSearchKey: undefined,
     currentSearchQueryJSON: undefined,
     currentSearchResults: undefined,
+    currentSelectedTransactionReportID: undefined,
     shouldShowSelectAllMatchingItems: false,
     shouldShowFiltersBarLoading: false,
     shouldUseLiveData: false,
@@ -40,6 +41,7 @@ const mockSearchStateContext = {
 const mockSearchActionsContext = {
     clearSelectedTransactions: jest.fn(),
     setLastSearchType: jest.fn(),
+    setCurrentSelectedTransactionReportID: jest.fn(),
     setSelectedTransactions: jest.fn(),
     setShouldShowFiltersBarLoading: jest.fn(),
     setShouldShowSelectAllMatchingItems: jest.fn(),

tests/ui/WeekListItemHeaderTest.tsx

@@ -25,6 +25,7 @@ const mockSearchStateContext = {
     currentSearchKey: undefined,
     currentSearchQueryJSON: undefined,
     currentSearchResults: undefined,
+    currentSelectedTransactionReportID: undefined,
     selectedReports: [],
     selectedTransactionIDs: [],
     selectedTransactions: {},
@@ -42,6 +43,7 @@ const mockSearchStateContext = {
 
 const mockSearchActionsContext = {
     setLastSearchType: jest.fn(),
+    setCurrentSelectedTransactionReportID: jest.fn(),
     setSelectedTransactions: jest.fn(),
     removeTransaction: jest.fn(),
     clearSelectedTransactions: jest.fn(),

tests/ui/YearListItemHeaderTest.tsx

@@ -26,6 +26,7 @@ const mockSearchStateContext = {
     currentSearchKey: undefined,
     currentSearchQueryJSON: undefined,
     currentSearchResults: undefined,
+    currentSelectedTransactionReportID: undefined,
     selectedReports: [],
     selectedTransactionIDs: [],
     selectedTransactions: {},
@@ -43,6 +44,7 @@ const mockSearchStateContext = {
 
 const mockSearchActionsContext = {
     setLastSearchType: jest.fn(),
+    setCurrentSelectedTransactionReportID: jest.fn(),
     setSelectedTransactions: jest.fn(),
     removeTransaction: jest.fn(),
     clearSelectedTransactions: jest.fn(),