Fix: Exports list is not scrollable when export options exceed viewport height

src/components/MoneyReportHeader.tsx

@@ -110,6 +110,7 @@ import {
     rejectMoneyRequestReason,
     shouldBlockSubmitDueToStrictPolicyRules,
 } from '@libs/ReportUtils';
+import shouldPopoverUseScrollView from '@libs/shouldPopoverUseScrollView';
 import {shouldRestrictUserBillableActions} from '@libs/SubscriptionUtils';
 import type {SkeletonSpanReasonAttributes} from '@libs/telemetry/useSkeletonSpan';
 import {
@@ -2177,6 +2178,7 @@ function MoneyReportHeader({
     ]);
 
     const shouldShowSelectedTransactionsButton = !!selectedTransactionsOptions.length && !transactionThreadReportID;
+    const popoverUseScrollView = shouldPopoverUseScrollView(selectedTransactionsOptions);
 
     const hasPayInSelectionMode = allExpensesSelected && hasPayAction;
 
@@ -2258,6 +2260,7 @@ function MoneyReportHeader({
                     customText={translate('workspace.common.selected', {count: selectedTransactionIDs.length})}
                     isSplitButton={false}
                     shouldAlwaysShowDropdownMenu
+                    shouldPopoverUseScrollView={popoverUseScrollView}
                     wrapperStyle={wrapperStyle}
                 />
             ),
@@ -2272,6 +2275,7 @@ function MoneyReportHeader({
             translate,
             selectedTransactionIDs.length,
             kycWallRef,
+            popoverUseScrollView,
         ],
     );
 

src/components/MoneyRequestReportView/MoneyRequestReportActionsList.tsx

@@ -59,6 +59,7 @@
     wasMessageReceivedWhileOffline,
 } from '@libs/ReportActionsUtils';
 import {canUserPerformWriteAction, chatIncludesChronosWithID, getOriginalReportID, getReportLastVisibleActionCreated, isHarvestCreatedExpenseReport, isUnread} from '@libs/ReportUtils';
+import shouldPopoverUseScrollView from '@libs/shouldPopoverUseScrollView';
 import markOpenReportEnd from '@libs/telemetry/markOpenReportEnd';
 import type {SkeletonSpanReasonAttributes} from '@libs/telemetry/useSkeletonSpan';
 import {isTransactionPendingDelete} from '@libs/TransactionUtils';
@@ -306,6 +307,8 @@
         });
     }, [originalSelectedTransactionsOptions, dismissedRejectUseExplanation, isDelegateAccessRestricted, showDelegateNoAccessModal]);
 
+    const popoverUseScrollView = shouldPopoverUseScrollView(selectedTransactionsOptions);
+
     const dismissRejectModalBasedOnAction = useCallback(() => {
         if (rejectModalAction === CONST.REPORT.TRANSACTION_SECONDARY_ACTIONS.REJECT_BULK) {
             dismissRejectUseExplanation();
@@ -740,7 +743,7 @@
         reportScrollManager.scrollToEnd();
         readActionSkipped.current = false;
         readNewestAction(report.reportID, !!reportMetadata?.hasOnceLoadedReportActions);
     }, [setIsFloatingMessageCounterVisible, hasNewestReportAction, reportScrollManager, report.reportID, reportMetadata?.hasOnceLoadedReportActions]);
 
     const scrollToNewTransaction = useCallback(
         (pageY: number) => {
@@ -800,6 +803,7 @@
                         customText={translate('workspace.common.selected', {count: selectedTransactionIDs.length})}
                         isSplitButton={false}
                         shouldAlwaysShowDropdownMenu
+                        shouldPopoverUseScrollView={popoverUseScrollView}
                         wrapperStyle={[styles.w100, styles.ph5]}
                     />
                     <View style={[styles.alignItemsCenter, styles.userSelectNone, styles.flexRow, styles.pt6, styles.ph8, styles.pb3]}>

src/components/Search/SearchBulkActionsButton.tsx

@@ -20,6 +20,7 @@ import useThemeStyles from '@hooks/useThemeStyles';
 import {handleBulkPayItemSelected} from '@libs/actions/Search';
 import Navigation from '@libs/Navigation/Navigation';
 import {isExpenseReport} from '@libs/ReportUtils';
+import shouldPopoverUseScrollView from '@libs/shouldPopoverUseScrollView';
 import CONST from '@src/CONST';
 import ONYXKEYS from '@src/ONYXKEYS';
 import ROUTES from '@src/ROUTES';
@@ -76,8 +77,7 @@ function SearchBulkActionsButton({queryJSON}: SearchBulkActionsButtonProps) {
     const selectedTransactionsKeys = Object.keys(selectedTransactions ?? {});
     const isExpenseReportType = queryJSON.type === CONST.SEARCH.DATA_TYPES.EXPENSE_REPORT;
 
-    const shouldPopoverUseScrollView =
-        headerButtonsOptions.length >= CONST.DROPDOWN_SCROLL_THRESHOLD || headerButtonsOptions.some((option) => (option.subMenuItems?.length ?? 0) >= CONST.DROPDOWN_SCROLL_THRESHOLD);
+    const popoverUseScrollView = shouldPopoverUseScrollView(headerButtonsOptions);
 
     const selectedItemsCount = useMemo(() => {
         if (!selectedTransactions) {
@@ -123,7 +123,7 @@ function SearchBulkActionsButton({queryJSON}: SearchBulkActionsButtonProps) {
                                 shouldAlwaysShowDropdownMenu
                                 isDisabled={headerButtonsOptions.length === 0}
                                 onPress={() => null}
-                                shouldPopoverUseScrollView={shouldPopoverUseScrollView}
+                                shouldPopoverUseScrollView={popoverUseScrollView}
                                 onSubItemSelected={(subItem) =>
                                     handleBulkPayItemSelected({
                                         item: subItem,
@@ -163,7 +163,7 @@ function SearchBulkActionsButton({queryJSON}: SearchBulkActionsButtonProps) {
                                 buttonSize={CONST.DROPDOWN_BUTTON_SIZE.SMALL}
                                 customText={selectionButtonText}
                                 options={headerButtonsOptions}
-                                shouldPopoverUseScrollView={shouldPopoverUseScrollView}
+                                shouldPopoverUseScrollView={popoverUseScrollView}
                                 onSubItemSelected={(subItem) =>
                                     handleBulkPayItemSelected({
                                         item: subItem,

src/components/SettlementButton/index.tsx

@@ -38,6 +38,7 @@ import {
     isIOUReport,
 } from '@libs/ReportUtils';
 import {handleUnvalidatedUserNavigation, useSettlementButtonPaymentMethods} from '@libs/SettlementButtonUtils';
+import shouldPopoverUseScrollView from '@libs/shouldPopoverUseScrollView';
 import {shouldRestrictUserBillableActions} from '@libs/SubscriptionUtils';
 import {setPersonalBankAccountContinueKYCOnSuccess} from '@userActions/BankAccounts';
 import {approveMoneyRequest} from '@userActions/IOU';
@@ -577,8 +578,7 @@ function SettlementButton({
 
     const shouldUseSplitButton = hasPreferredPaymentMethod || !!lastPaymentPolicy || ((isExpenseReport || isInvoiceReport) && hasIntentToPay);
     const shouldLimitWidth = shouldUseShortForm && shouldUseSplitButton && !paymentButtonOptions.length;
-    const shouldPopoverUseScrollView =
-        paymentButtonOptions.length >= CONST.DROPDOWN_SCROLL_THRESHOLD || paymentButtonOptions.some((option) => (option.subMenuItems?.length ?? 0) >= CONST.DROPDOWN_SCROLL_THRESHOLD);
+    const popoverUseScrollView = shouldPopoverUseScrollView(paymentButtonOptions);
 
     return (
         <KYCWall
@@ -623,7 +623,7 @@ function SettlementButton({
                     }}
                     style={style}
                     shouldUseShortForm={shouldUseShortForm}
-                    shouldPopoverUseScrollView={shouldPopoverUseScrollView}
+                    shouldPopoverUseScrollView={popoverUseScrollView}
                     containerStyles={paymentButtonOptions.length > 5 ? styles.settlementButtonListContainer : {}}
                     wrapperStyle={[wrapperStyle, shouldLimitWidth ? styles.settlementButtonShortFormWidth : {}]}
                     disabledStyle={disabledStyle}

src/libs/shouldPopoverUseScrollView.ts

@@ -0,0 +1,8 @@
+import type {DropdownOption} from '@components/ButtonWithDropdownMenu/types';
+import CONST from '@src/CONST';
+
+function shouldPopoverUseScrollView<T>(options: Array<DropdownOption<T>>): boolean {
+    return options.length >= CONST.DROPDOWN_SCROLL_THRESHOLD || options.some((option) => (option.subMenuItems?.length ?? 0) >= CONST.DROPDOWN_SCROLL_THRESHOLD);
+}
+
+export default shouldPopoverUseScrollView;

tests/unit/shouldPopoverUseScrollViewTest.ts

@@ -0,0 +1,39 @@
+import type {DropdownOption} from '@components/ButtonWithDropdownMenu/types';
+import shouldPopoverUseScrollView from '@libs/shouldPopoverUseScrollView';
+import CONST from '@src/CONST';
+
+describe('shouldPopoverUseScrollView', () => {
+    const createOption = (value: string, subMenuItems?: Array<{value: string; text: string}>): DropdownOption<string> => ({
+        value,
+        text: value,
+        ...(subMenuItems && {subMenuItems: subMenuItems.map((item) => ({...item, key: item.value}))}),
+    });
+
+    it('returns false when there are few top-level options and no large submenus', () => {
+        const options = [createOption('a'), createOption('b'), createOption('c')];
+        expect(shouldPopoverUseScrollView(options)).toBe(false);
+    });
+
+    it('returns true when there are 5 or more top-level options', () => {
+        const options = Array.from({length: CONST.DROPDOWN_SCROLL_THRESHOLD}, (_, i) => createOption(`option-${i}`));
+        expect(shouldPopoverUseScrollView(options)).toBe(true);
+    });
+
+    it('returns true when any option has 5 or more submenu items', () => {
+        const subMenuItems = Array.from({length: CONST.DROPDOWN_SCROLL_THRESHOLD}, (_, i) => ({
+            value: `sub-${i}`,
+            text: `Sub ${i}`,
+        }));
+        const options = [createOption('parent', subMenuItems)];
+        expect(shouldPopoverUseScrollView(options)).toBe(true);
+    });
+
+    it('returns false when submenu has fewer than threshold items', () => {
+        const subMenuItems = [
+            {value: 'sub-1', text: 'Sub 1'},
+            {value: 'sub-2', text: 'Sub 2'},
+        ];
+        const options = [createOption('parent', subMenuItems)];
+        expect(shouldPopoverUseScrollView(options)).toBe(false);
+    });
+});