From 0d26d4caeca5a8d7a374c72540fdcd21be12fe8e Mon Sep 17 00:00:00 2001 From: Carlos Martins Date: Wed, 17 Dec 2025 08:44:38 -0700 Subject: [PATCH 1/3] fix groupby scroll blocker --- .../Search/TransactionGroupListExpanded.tsx | 29 ++++++++++++++++--- 1 file changed, 25 insertions(+), 4 deletions(-) diff --git a/src/components/SelectionListWithSections/Search/TransactionGroupListExpanded.tsx b/src/components/SelectionListWithSections/Search/TransactionGroupListExpanded.tsx index 90f6036fc8da..996254c54b9a 100644 --- a/src/components/SelectionListWithSections/Search/TransactionGroupListExpanded.tsx +++ b/src/components/SelectionListWithSections/Search/TransactionGroupListExpanded.tsx @@ -4,6 +4,7 @@ import ActivityIndicator from '@components/ActivityIndicator'; import Button from '@components/Button'; import OfflineWithFeedback from '@components/OfflineWithFeedback'; import {PressableWithFeedback} from '@components/Pressable'; +import ScrollView from '@components/ScrollView'; import type {SearchColumnType} from '@components/Search/types'; import SearchTableHeader, {getExpenseHeaders} from '@components/SelectionListWithSections/SearchTableHeader'; import type {ListItem, TransactionGroupListExpandedProps, TransactionListItemType} from '@components/SelectionListWithSections/types'; @@ -12,13 +13,14 @@ import TransactionItemRow from '@components/TransactionItemRow'; import {WideRHPContext} from '@components/WideRHPContextProvider'; import useCurrentUserPersonalDetails from '@hooks/useCurrentUserPersonalDetails'; import useLocalize from '@hooks/useLocalize'; +import useWindowDimensions from '@hooks/useWindowDimensions'; import useOnyx from '@hooks/useOnyx'; import useResponsiveLayout from '@hooks/useResponsiveLayout'; import useTheme from '@hooks/useTheme'; import useThemeStyles from '@hooks/useThemeStyles'; import {getReportIDForTransaction} from '@libs/MoneyRequestReportUtils'; import Navigation from '@libs/Navigation/Navigation'; -import {createAndOpenSearchTransactionThread, getColumnsToShow} from '@libs/SearchUIUtils'; +import {createAndOpenSearchTransactionThread, getColumnsToShow, getTableMinWidth} from '@libs/SearchUIUtils'; import {getTransactionViolations} from '@libs/TransactionUtils'; import {setActiveTransactionIDs} from '@userActions/TransactionThreadNavigation'; import CONST from '@src/CONST'; @@ -50,6 +52,7 @@ function TransactionGroupListExpanded({ }: TransactionGroupListExpandedProps) { const theme = useTheme(); const styles = useThemeStyles(); + const {windowWidth} = useWindowDimensions(); const currentUserDetails = useCurrentUserPersonalDetails(); const {translate} = useLocalize(); const [isMobileSelectionModeEnabled] = useOnyx(ONYXKEYS.MOBILE_SELECTION_MODE, {canBeMissing: true}); @@ -174,8 +177,11 @@ function TransactionGroupListExpanded({ openReportInRHP(transaction); }; - return ( - <> + const minTableWidth = getTableMinWidth(columns ?? []); + const shouldScrollHorizontally = isLargeScreenWidth && minTableWidth > windowWidth; + + const content = ( + {isLargeScreenWidth && ( ({ /> )} - + + ); + + return ( + shouldScrollHorizontally ? ( + + {content} + + ) : ( + content + ) ); } From 81b188943ad505de4cdb3fe4f89d7b7e47fa3f89 Mon Sep 17 00:00:00 2001 From: Carlos Martins Date: Wed, 17 Dec 2025 08:51:01 -0700 Subject: [PATCH 2/3] fix prettier --- .../Search/TransactionGroupListExpanded.tsx | 28 +++++++++---------- 1 file changed, 13 insertions(+), 15 deletions(-) diff --git a/src/components/SelectionListWithSections/Search/TransactionGroupListExpanded.tsx b/src/components/SelectionListWithSections/Search/TransactionGroupListExpanded.tsx index 996254c54b9a..28f7e7317179 100644 --- a/src/components/SelectionListWithSections/Search/TransactionGroupListExpanded.tsx +++ b/src/components/SelectionListWithSections/Search/TransactionGroupListExpanded.tsx @@ -13,11 +13,11 @@ import TransactionItemRow from '@components/TransactionItemRow'; import {WideRHPContext} from '@components/WideRHPContextProvider'; import useCurrentUserPersonalDetails from '@hooks/useCurrentUserPersonalDetails'; import useLocalize from '@hooks/useLocalize'; -import useWindowDimensions from '@hooks/useWindowDimensions'; import useOnyx from '@hooks/useOnyx'; import useResponsiveLayout from '@hooks/useResponsiveLayout'; import useTheme from '@hooks/useTheme'; import useThemeStyles from '@hooks/useThemeStyles'; +import useWindowDimensions from '@hooks/useWindowDimensions'; import {getReportIDForTransaction} from '@libs/MoneyRequestReportUtils'; import Navigation from '@libs/Navigation/Navigation'; import {createAndOpenSearchTransactionThread, getColumnsToShow, getTableMinWidth} from '@libs/SearchUIUtils'; @@ -278,20 +278,18 @@ function TransactionGroupListExpanded({ )} ); - - return ( - shouldScrollHorizontally ? ( - - {content} - - ) : ( - content - ) + + return shouldScrollHorizontally ? ( + + {content} + + ) : ( + content ); } From 455cb45dffa7f84e54985d371fd36f1111336e29 Mon Sep 17 00:00:00 2001 From: Carlos Martins Date: Wed, 17 Dec 2025 09:34:57 -0700 Subject: [PATCH 3/3] fix test --- tests/unit/TransactionGroupListItemTest.tsx | 1 + 1 file changed, 1 insertion(+) diff --git a/tests/unit/TransactionGroupListItemTest.tsx b/tests/unit/TransactionGroupListItemTest.tsx index a6d46d6544bc..085eefb48f38 100644 --- a/tests/unit/TransactionGroupListItemTest.tsx +++ b/tests/unit/TransactionGroupListItemTest.tsx @@ -21,6 +21,7 @@ jest.mock('@libs/actions/Search', () => ({ jest.mock('@libs/SearchUIUtils', () => ({ getSections: jest.fn(() => []), isCorrectSearchUserName: jest.fn(() => true), + getTableMinWidth: jest.fn(() => 0), })); const mockTransaction: TransactionListItemType = {