From f68715568fd5e7e562542ad466743f4def8757fd Mon Sep 17 00:00:00 2001
From: daledah <daleda261@outlook.com>
Date: Thu, 3 Oct 2024 16:31:15 +0700
Subject: [PATCH] fix: update logic to preven castings

---
 src/components/Search/index.tsx                 |  5 +++++
 src/components/SelectionListWithModal/index.tsx | 16 ++++++++++++----
 2 files changed, 17 insertions(+), 4 deletions(-)

diff --git a/src/components/Search/index.tsx b/src/components/Search/index.tsx
index 8130f25bb4a5..fca81c6ef50b 100644
--- a/src/components/Search/index.tsx
+++ b/src/components/Search/index.tsx
@@ -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
diff --git a/src/components/SelectionListWithModal/index.tsx b/src/components/SelectionListWithModal/index.tsx
index eee9a2541100..068e70099318 100644
--- a/src/components/SelectionListWithModal/index.tsx
+++ b/src/components/SelectionListWithModal/index.tsx
@@ -4,7 +4,7 @@ import * as Expensicons from '@components/Icon/Expensicons';
 import MenuItem from '@components/MenuItem';
 import Modal from '@components/Modal';
 import SelectionList from '@components/SelectionList';
-import type {BaseSelectionListProps, ListItem, ReportListItemType, SelectionListHandle} from '@components/SelectionList/types';
+import type {BaseSelectionListProps, ListItem, SelectionListHandle} from '@components/SelectionList/types';
 import useLocalize from '@hooks/useLocalize';
 import useMobileSelectionMode from '@hooks/useMobileSelectionMode';
 import useResponsiveLayout from '@hooks/useResponsiveLayout';
@@ -15,10 +15,11 @@ type SelectionListWithModalProps<TItem extends ListItem> = BaseSelectionListProp
     turnOnSelectionModeOnLongPress?: boolean;
     onTurnOnSelectionMode?: (item: TItem | null) => void;
     shouldAutoTurnOff?: boolean;
+    isSelected?: (item: TItem) => boolean;
 };
 
 function SelectionListWithModal<TItem extends ListItem>(
-    {turnOnSelectionModeOnLongPress, onTurnOnSelectionMode, onLongPressRow, sections, shouldAutoTurnOff, ...rest}: SelectionListWithModalProps<TItem>,
+    {turnOnSelectionModeOnLongPress, onTurnOnSelectionMode, onLongPressRow, sections, shouldAutoTurnOff, isSelected, ...rest}: SelectionListWithModalProps<TItem>,
     ref: ForwardedRef<SelectionListHandle>,
 ) {
     const [isModalVisible, setIsModalVisible] = useState(false);
@@ -28,12 +29,19 @@ function SelectionListWithModal<TItem extends ListItem>(
     // See https://github.com/Expensify/App/issues/48675 for more details
     const {isSmallScreenWidth} = useResponsiveLayout();
     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 || (item as unknown as ReportListItemType)?.transactions?.some((transaction) => transaction.isSelected));
+        const selectedItems = sections[0].data.filter((item) => {
+            if (isSelected) {
+                return isSelected(item);
+            }
+            return !!item.isSelected;
+        });
         selectionRef.current = selectedItems.length;
 
         if (!isSmallScreenWidth) {
@@ -50,7 +58,7 @@ function SelectionListWithModal<TItem extends ListItem>(
         } else if (selectedItems.length === 0 && selectionMode?.isEnabled && !wasSelectionOnRef.current) {
             turnOffMobileSelectionMode();
         }
-    }, [sections, selectionMode, isSmallScreenWidth]);
+    }, [sections, selectionMode, isSmallScreenWidth, isSelected]);
 
     useEffect(
         () => () => {