From 2922b73d56811f1dbd517dd72ae5f86b1a57f7d3 Mon Sep 17 00:00:00 2001 From: Faizan Shoukat Abbasi Date: Fri, 9 Jan 2026 20:09:04 +0500 Subject: [PATCH 01/11] fix: Refetch expanded group data on toggle to prevent stale transactions after date edits --- .../Search/TransactionGroupListItem.tsx | 9 +++++++++ 1 file changed, 9 insertions(+) diff --git a/src/components/SelectionListWithSections/Search/TransactionGroupListItem.tsx b/src/components/SelectionListWithSections/Search/TransactionGroupListItem.tsx index ed015ba4491de..c8dffe41c4efa 100644 --- a/src/components/SelectionListWithSections/Search/TransactionGroupListItem.tsx +++ b/src/components/SelectionListWithSections/Search/TransactionGroupListItem.tsx @@ -188,6 +188,15 @@ function TransactionGroupListItem({ searchTransactions(); }, [newTransactionID, isExpanded, searchTransactions]); + useEffect(() => { + if (!isExpanded) { + return; + } + searchTransactions(); + // eslint-disable-next-line react-compiler/react-compiler + // eslint-disable-next-line react-hooks/exhaustive-deps + }, [isExpanded]); + const handleToggle = useCallback(() => { setIsExpanded(!isExpanded); if (isExpanded) { From 5a20afcd8cb823ab79b04e18d594d02fbd693346 Mon Sep 17 00:00:00 2001 From: Faizan Shoukat Abbasi Date: Fri, 9 Jan 2026 20:58:31 +0500 Subject: [PATCH 02/11] fix: Refactor useEffect to handle expand refresh without duplicate logic --- .../Search/TransactionGroupListItem.tsx | 12 ++---------- 1 file changed, 2 insertions(+), 10 deletions(-) diff --git a/src/components/SelectionListWithSections/Search/TransactionGroupListItem.tsx b/src/components/SelectionListWithSections/Search/TransactionGroupListItem.tsx index c8dffe41c4efa..86cce9f242cc1 100644 --- a/src/components/SelectionListWithSections/Search/TransactionGroupListItem.tsx +++ b/src/components/SelectionListWithSections/Search/TransactionGroupListItem.tsx @@ -180,22 +180,14 @@ function TransactionGroupListItem({ const StyleUtils = useStyleUtils(); const pressableRef = useRef(null); - - useEffect(() => { - if (!newTransactionID || !isExpanded) { - return; - } - searchTransactions(); - }, [newTransactionID, isExpanded, searchTransactions]); + // Refetch when expanding (ensures fresh data after navigating back) and when newTransactionID changes useEffect(() => { if (!isExpanded) { return; } searchTransactions(); - // eslint-disable-next-line react-compiler/react-compiler - // eslint-disable-next-line react-hooks/exhaustive-deps - }, [isExpanded]); + }, [newTransactionID, isExpanded, searchTransactions]); const handleToggle = useCallback(() => { setIsExpanded(!isExpanded); From b17a7932110aee0bc63447e55e4b32fda0cc0fcd Mon Sep 17 00:00:00 2001 From: Faizan Shoukat Abbasi Date: Fri, 9 Jan 2026 20:59:27 +0500 Subject: [PATCH 03/11] removed extra cide --- .../Search/TransactionGroupListItem.tsx | 3 +-- 1 file changed, 1 insertion(+), 2 deletions(-) diff --git a/src/components/SelectionListWithSections/Search/TransactionGroupListItem.tsx b/src/components/SelectionListWithSections/Search/TransactionGroupListItem.tsx index 86cce9f242cc1..e63d1c48f76a1 100644 --- a/src/components/SelectionListWithSections/Search/TransactionGroupListItem.tsx +++ b/src/components/SelectionListWithSections/Search/TransactionGroupListItem.tsx @@ -180,8 +180,7 @@ function TransactionGroupListItem({ const StyleUtils = useStyleUtils(); const pressableRef = useRef(null); - // Refetch when expanding (ensures fresh data after navigating back) and when newTransactionID changes - + useEffect(() => { if (!isExpanded) { return; From 786bb0cc6031b7f4273da6d55da91719aadd22fa Mon Sep 17 00:00:00 2001 From: Faizan Shoukat Abbasi Date: Fri, 9 Jan 2026 20:59:46 +0500 Subject: [PATCH 04/11] removed extra cide --- .../Search/TransactionGroupListItem.tsx | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/src/components/SelectionListWithSections/Search/TransactionGroupListItem.tsx b/src/components/SelectionListWithSections/Search/TransactionGroupListItem.tsx index e63d1c48f76a1..402570e60775b 100644 --- a/src/components/SelectionListWithSections/Search/TransactionGroupListItem.tsx +++ b/src/components/SelectionListWithSections/Search/TransactionGroupListItem.tsx @@ -180,7 +180,7 @@ function TransactionGroupListItem({ const StyleUtils = useStyleUtils(); const pressableRef = useRef(null); - + useEffect(() => { if (!isExpanded) { return; From f1c4b8602e10bc40085d2304ec3e49beaa140081 Mon Sep 17 00:00:00 2001 From: Faizan Shoukat Abbasi Date: Fri, 9 Jan 2026 21:12:01 +0500 Subject: [PATCH 05/11] fixed useEffect issue and added ref --- .../Search/TransactionGroupListItem.tsx | 11 +++++++---- 1 file changed, 7 insertions(+), 4 deletions(-) diff --git a/src/components/SelectionListWithSections/Search/TransactionGroupListItem.tsx b/src/components/SelectionListWithSections/Search/TransactionGroupListItem.tsx index 402570e60775b..2cfd71c3e56a5 100644 --- a/src/components/SelectionListWithSections/Search/TransactionGroupListItem.tsx +++ b/src/components/SelectionListWithSections/Search/TransactionGroupListItem.tsx @@ -181,12 +181,15 @@ function TransactionGroupListItem({ const StyleUtils = useStyleUtils(); const pressableRef = useRef(null); + // Use ref to avoid infinite loop - searchTransactions changes when snapshot updates + const searchTransactionsRef = useRef(searchTransactions); + searchTransactionsRef.current = searchTransactions; useEffect(() => { if (!isExpanded) { return; } - searchTransactions(); - }, [newTransactionID, isExpanded, searchTransactions]); + searchTransactionsRef.current(); + }, [newTransactionID, isExpanded]); const handleToggle = useCallback(() => { setIsExpanded(!isExpanded); @@ -229,10 +232,10 @@ function TransactionGroupListItem({ if (isEmpty && !shouldDisplayEmptyView) { onPress(); } else if (groupItem.transactionsQueryJSON && !isExpanded) { - searchTransactions(); + searchTransactionsRef.current(); } handleToggle(); - }, [isEmpty, shouldDisplayEmptyView, groupItem.transactionsQueryJSON, isExpanded, handleToggle, onPress, searchTransactions]); + }, [isEmpty, shouldDisplayEmptyView, groupItem.transactionsQueryJSON, isExpanded, handleToggle, onPress]); const getHeader = useCallback( (hovered: boolean) => { From dd43bcfa7bb8b980d76124fa5245c17617239c1e Mon Sep 17 00:00:00 2001 From: Faizan Shoukat Abbasi Date: Sat, 10 Jan 2026 00:59:53 +0500 Subject: [PATCH 06/11] fixed AI feedback --- .../Search/TransactionGroupListItem.tsx | 4 +--- 1 file changed, 1 insertion(+), 3 deletions(-) diff --git a/src/components/SelectionListWithSections/Search/TransactionGroupListItem.tsx b/src/components/SelectionListWithSections/Search/TransactionGroupListItem.tsx index 2cfd71c3e56a5..38214ec26ebf2 100644 --- a/src/components/SelectionListWithSections/Search/TransactionGroupListItem.tsx +++ b/src/components/SelectionListWithSections/Search/TransactionGroupListItem.tsx @@ -231,11 +231,9 @@ function TransactionGroupListItem({ const onExpandIconPress = useCallback(() => { if (isEmpty && !shouldDisplayEmptyView) { onPress(); - } else if (groupItem.transactionsQueryJSON && !isExpanded) { - searchTransactionsRef.current(); } handleToggle(); - }, [isEmpty, shouldDisplayEmptyView, groupItem.transactionsQueryJSON, isExpanded, handleToggle, onPress]); + }, [isEmpty, shouldDisplayEmptyView, handleToggle, onPress]); const getHeader = useCallback( (hovered: boolean) => { From 1472a41f733f8a43e4338369561d1728c439db4c Mon Sep 17 00:00:00 2001 From: Faizan Shoukat Abbasi Date: Thu, 15 Jan 2026 02:35:25 +0500 Subject: [PATCH 07/11] Refactored code --- .../Search/TransactionGroupListItem.tsx | 29 ++++++++++++++----- 1 file changed, 22 insertions(+), 7 deletions(-) diff --git a/src/components/SelectionListWithSections/Search/TransactionGroupListItem.tsx b/src/components/SelectionListWithSections/Search/TransactionGroupListItem.tsx index 11e8de7858746..dc4a0e36464bf 100644 --- a/src/components/SelectionListWithSections/Search/TransactionGroupListItem.tsx +++ b/src/components/SelectionListWithSections/Search/TransactionGroupListItem.tsx @@ -157,7 +157,24 @@ function TransactionGroupListItem({ const shouldDisplayEmptyView = isEmpty && isExpenseReportType; const isDisabledOrEmpty = isEmpty || isDisabled; - const searchTransactions = useCallback( + // Refresh transactions when expanding - always starts fresh from offset 0 + // This is stable because it only depends on queryJSON, avoiding infinite loops + const refreshTransactions = useCallback(() => { + if (!groupItem.transactionsQueryJSON) { + return; + } + + search({ + queryJSON: groupItem.transactionsQueryJSON, + searchKey: undefined, + offset: 0, + shouldCalculateTotals: false, + isLoading: false, + }); + }, [groupItem.transactionsQueryJSON]); + + // Load more transactions for pagination - uses current offset + const loadMoreTransactions = useCallback( (pageSize = 0) => { if (!groupItem.transactionsQueryJSON) { return; @@ -188,15 +205,13 @@ function TransactionGroupListItem({ const StyleUtils = useStyleUtils(); const pressableRef = useRef(null); - // Use ref to avoid infinite loop - searchTransactions changes when snapshot updates - const searchTransactionsRef = useRef(searchTransactions); - searchTransactionsRef.current = searchTransactions; + // Trigger fresh search when expanding or when a new transaction is created while expanded useEffect(() => { if (!isExpanded) { return; } - searchTransactionsRef.current(); - }, [newTransactionID, isExpanded]); + refreshTransactions(); + }, [newTransactionID, isExpanded, refreshTransactions]); const handleToggle = useCallback(() => { setIsExpanded(!isExpanded); @@ -388,7 +403,7 @@ function TransactionGroupListItem({ isExpenseReportType={isExpenseReportType} transactionsSnapshot={transactionsSnapshot} transactionsQueryJSON={groupItem.transactionsQueryJSON} - searchTransactions={searchTransactions} + searchTransactions={loadMoreTransactions} isInSingleTransactionReport={groupItem.transactions.length === 1} onLongPress={onExpandedRowLongPress} /> From 1246831b4fc206846cd709fb4bcefa5daac5c92e Mon Sep 17 00:00:00 2001 From: Faizan Shoukat Abbasi Date: Mon, 19 Jan 2026 17:44:02 +0500 Subject: [PATCH 08/11] udpated feedbacks --- .../Search/TransactionGroupListItem.tsx | 10 +++++----- 1 file changed, 5 insertions(+), 5 deletions(-) diff --git a/src/components/SelectionListWithSections/Search/TransactionGroupListItem.tsx b/src/components/SelectionListWithSections/Search/TransactionGroupListItem.tsx index dc4a0e36464bf..859051781597c 100644 --- a/src/components/SelectionListWithSections/Search/TransactionGroupListItem.tsx +++ b/src/components/SelectionListWithSections/Search/TransactionGroupListItem.tsx @@ -158,7 +158,7 @@ function TransactionGroupListItem({ const isDisabledOrEmpty = isEmpty || isDisabled; // Refresh transactions when expanding - always starts fresh from offset 0 - // This is stable because it only depends on queryJSON, avoiding infinite loops + // This is stable because it only depends on queryJSON and loading state const refreshTransactions = useCallback(() => { if (!groupItem.transactionsQueryJSON) { return; @@ -169,12 +169,12 @@ function TransactionGroupListItem({ searchKey: undefined, offset: 0, shouldCalculateTotals: false, - isLoading: false, + isLoading: !!transactionsSnapshot?.search?.isLoading, }); - }, [groupItem.transactionsQueryJSON]); + }, [groupItem.transactionsQueryJSON, transactionsSnapshot?.search?.isLoading]); // Load more transactions for pagination - uses current offset - const loadMoreTransactions = useCallback( + const searchTransactions = useCallback( (pageSize = 0) => { if (!groupItem.transactionsQueryJSON) { return; @@ -403,7 +403,7 @@ function TransactionGroupListItem({ isExpenseReportType={isExpenseReportType} transactionsSnapshot={transactionsSnapshot} transactionsQueryJSON={groupItem.transactionsQueryJSON} - searchTransactions={loadMoreTransactions} + searchTransactions={searchTransactions} isInSingleTransactionReport={groupItem.transactions.length === 1} onLongPress={onExpandedRowLongPress} /> From 2ac48d1d9ea1c727300522dd31b7e5f5d03c9f9c Mon Sep 17 00:00:00 2001 From: Faizan Shoukat Abbasi Date: Fri, 30 Jan 2026 02:03:13 +0500 Subject: [PATCH 09/11] Resolved feedbacks --- .../Search/TransactionGroupListItem.tsx | 40 +++++++------------ 1 file changed, 14 insertions(+), 26 deletions(-) diff --git a/src/components/SelectionListWithSections/Search/TransactionGroupListItem.tsx b/src/components/SelectionListWithSections/Search/TransactionGroupListItem.tsx index 1080ec1443137..c494ccfc81b03 100644 --- a/src/components/SelectionListWithSections/Search/TransactionGroupListItem.tsx +++ b/src/components/SelectionListWithSections/Search/TransactionGroupListItem.tsx @@ -166,25 +166,9 @@ function TransactionGroupListItem({ const shouldDisplayEmptyView = isEmpty && isExpenseReportType; const isDisabledOrEmpty = isEmpty || isDisabled; - // Refresh transactions when expanding - always starts fresh from offset 0 - // This is stable because it only depends on queryJSON and loading state - const refreshTransactions = useCallback(() => { - if (!groupItem.transactionsQueryJSON) { - return; - } - - search({ - queryJSON: groupItem.transactionsQueryJSON, - searchKey: undefined, - offset: 0, - shouldCalculateTotals: false, - isLoading: !!transactionsSnapshot?.search?.isLoading, - }); - }, [groupItem.transactionsQueryJSON, transactionsSnapshot?.search?.isLoading]); - - // Load more transactions for pagination - uses current offset + // Search transactions - handles both refresh (offset 0) and pagination (current offset + pageSize) const searchTransactions = useCallback( - (pageSize = 0) => { + (pageSize = 0, isRefresh = false) => { if (!groupItem.transactionsQueryJSON) { return; } @@ -192,7 +176,7 @@ function TransactionGroupListItem({ search({ queryJSON: groupItem.transactionsQueryJSON, searchKey: undefined, - offset: (transactionsSnapshot?.search?.offset ?? 0) + pageSize, + offset: isRefresh ? 0 : (transactionsSnapshot?.search?.offset ?? 0) + pageSize, shouldCalculateTotals: false, isLoading: !!transactionsSnapshot?.search?.isLoading, }); @@ -214,20 +198,24 @@ function TransactionGroupListItem({ const StyleUtils = useStyleUtils(); const pressableRef = useRef(null); - // Trigger fresh search when expanding or when a new transaction is created while expanded + // Handle new transaction created while already expanded useEffect(() => { - if (!isExpanded) { + if (!isExpanded || !newTransactionID) { return; } - refreshTransactions(); - }, [newTransactionID, isExpanded, refreshTransactions]); + searchTransactions(0, true); + }, [newTransactionID, isExpanded, searchTransactions]); const handleToggle = useCallback(() => { - setIsExpanded(!isExpanded); - if (isExpanded) { + const newExpandedState = !isExpanded; + setIsExpanded(newExpandedState); + if (newExpandedState) { + // Refresh transactions when expanding + searchTransactions(0, true); + } else { setTransactionsVisibleLimit(CONST.TRANSACTION.RESULTS_PAGE_SIZE); } - }, [isExpanded]); + }, [isExpanded, searchTransactions]); const onPress = useCallback(() => { if (isExpenseReportType || transactions.length === 0) { From 9ed52e0af1fe460d7d84dfd225c605bad2c740b0 Mon Sep 17 00:00:00 2001 From: Faizan Shoukat Abbasi Date: Fri, 30 Jan 2026 04:56:37 +0500 Subject: [PATCH 10/11] removed comment and make condition sequnce like old --- .../Search/TransactionGroupListItem.tsx | 3 +-- 1 file changed, 1 insertion(+), 2 deletions(-) diff --git a/src/components/SelectionListWithSections/Search/TransactionGroupListItem.tsx b/src/components/SelectionListWithSections/Search/TransactionGroupListItem.tsx index c494ccfc81b03..99b0b01512b5b 100644 --- a/src/components/SelectionListWithSections/Search/TransactionGroupListItem.tsx +++ b/src/components/SelectionListWithSections/Search/TransactionGroupListItem.tsx @@ -198,9 +198,8 @@ function TransactionGroupListItem({ const StyleUtils = useStyleUtils(); const pressableRef = useRef(null); - // Handle new transaction created while already expanded useEffect(() => { - if (!isExpanded || !newTransactionID) { + if (!newTransactionID || !isExpanded) { return; } searchTransactions(0, true); From e4741c9c219cb69ec784d1ccb552ba64596782f1 Mon Sep 17 00:00:00 2001 From: Faizan Shoukat Abbasi Date: Fri, 30 Jan 2026 05:23:26 +0500 Subject: [PATCH 11/11] updated feedback --- .../Search/TransactionGroupListItem.tsx | 22 +++++++++++-------- 1 file changed, 13 insertions(+), 9 deletions(-) diff --git a/src/components/SelectionListWithSections/Search/TransactionGroupListItem.tsx b/src/components/SelectionListWithSections/Search/TransactionGroupListItem.tsx index 99b0b01512b5b..d12bba47546d8 100644 --- a/src/components/SelectionListWithSections/Search/TransactionGroupListItem.tsx +++ b/src/components/SelectionListWithSections/Search/TransactionGroupListItem.tsx @@ -206,15 +206,19 @@ function TransactionGroupListItem({ }, [newTransactionID, isExpanded, searchTransactions]); const handleToggle = useCallback(() => { - const newExpandedState = !isExpanded; - setIsExpanded(newExpandedState); - if (newExpandedState) { - // Refresh transactions when expanding - searchTransactions(0, true); - } else { - setTransactionsVisibleLimit(CONST.TRANSACTION.RESULTS_PAGE_SIZE); - } - }, [isExpanded, searchTransactions]); + setIsExpanded((prev) => { + const newExpandedState = !prev; + + if (newExpandedState) { + // Refresh transactions when expanding + searchTransactions(0, true); + } else { + setTransactionsVisibleLimit(CONST.TRANSACTION.RESULTS_PAGE_SIZE); + } + + return newExpandedState; + }); + }, [searchTransactions]); const onPress = useCallback(() => { if (isExpenseReportType || transactions.length === 0) {