diff --git a/src/components/SelectionListWithSections/Search/TransactionGroupListItem.tsx b/src/components/SelectionListWithSections/Search/TransactionGroupListItem.tsx index 7f234f04061b2..d12bba47546d8 100644 --- a/src/components/SelectionListWithSections/Search/TransactionGroupListItem.tsx +++ b/src/components/SelectionListWithSections/Search/TransactionGroupListItem.tsx @@ -166,8 +166,9 @@ function TransactionGroupListItem({ const shouldDisplayEmptyView = isEmpty && isExpenseReportType; const isDisabledOrEmpty = isEmpty || isDisabled; + // 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; } @@ -175,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, }); @@ -201,15 +202,23 @@ function TransactionGroupListItem({ if (!newTransactionID || !isExpanded) { return; } - searchTransactions(); + searchTransactions(0, true); }, [newTransactionID, isExpanded, searchTransactions]); const handleToggle = useCallback(() => { - setIsExpanded(!isExpanded); - if (isExpanded) { - setTransactionsVisibleLimit(CONST.TRANSACTION.RESULTS_PAGE_SIZE); - } - }, [isExpanded]); + 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) { @@ -244,11 +253,9 @@ function TransactionGroupListItem({ const onExpandIconPress = useCallback(() => { if (isEmpty && !shouldDisplayEmptyView) { onPress(); - } else if (groupItem.transactionsQueryJSON && !isExpanded) { - searchTransactions(); } handleToggle(); - }, [isEmpty, shouldDisplayEmptyView, groupItem.transactionsQueryJSON, isExpanded, handleToggle, onPress, searchTransactions]); + }, [isEmpty, shouldDisplayEmptyView, handleToggle, onPress]); const getHeader = useCallback( (hovered: boolean) => {