[Due for payment 2026-04-01] [$250] Exports list on Reports page is not scrollable when export options exceed viewport height

[m-natarajan]

If you haven’t already, check out our contributing guidelines for onboarding and email contributors@expensify.com to request to join our Slack channel!

---

Version Number: 9.3.34-1
Reproducible in staging?: Y
Reproducible in production?: Y
If this was caught during regression testing, add the test name, ID and link from BrowserStack:
Email or phone of affected tester (no customers):
Logs: https://stackoverflow.com/c/expensify/questions/4856
Expensify/Expensify Issue URL:
Issue reported by: @sakluger
Slack conversation (hyperlinked to channel name): #Expensify Bugs

Action Performed:

Precondotion:
At least 9 or more export formats are configured in Expensify Classic for the workspace (so that the export list exceeds the viewport height in NewDot).

1. In New Expensify (NewDot), navigate to the Reports page
2. Select one or more reports using the checkboxes
3. Click the Export button to open the list of export options
4. Attempt to scroll within the exports list to view all export formats

Expected Result:

The exports list should be scrollable, allowing the user to access all configured export formats, even when they exceed the viewport height.
Users should be able to select any export format, including those above or below the fold.

Actual Result:

The exports list is not scrollable.
Export options that do not fit within the viewport are inaccessible, preventing users from using some export formats.

Workaround:

Unknown

Platforms:

Select the officially supported platforms where the issue was reproduced:

• Android: App
• Android: mWeb Chrome
• iOS: App
• iOS: mWeb Safari
• iOS: mWeb Chrome
• Windows: Chrome
• MacOS: Chrome / Safari

Screenshots/Videos

Recording.2501.mp4

View all open jobs on GitHub

Issue Owner

Current Issue Owner: @mallenexpensify

Upwork Automation - Do Not Edit

• Upwork Job URL: https://www.upwork.com/jobs/~022031392184110107864
• Upwork Job ID: 2031392184110107864
• Last Price Increase: 2026-03-10

[melvin-bot]

Triggered auto assignment to @garrettmknight (Bug), see https://stackoverflow.com/c/expensify/questions/14418 for more details. Please add this bug to a GH project, as outlined in the SO.

[MelvinBot]

Proposal

Please re-state the problem that we are trying to solve in this issue.

When a workspace has 9+ export formats configured in Expensify Classic, the export options dropdown on the NewDot Reports/Search page is not scrollable. Export options that extend beyond the viewport height are inaccessible.

What is the root cause of that problem?

The root cause is a missing shouldPopoverUseScrollView prop on the wide-screen code path in SearchBulkActionsButton, combined with the fact that PopoverMenu doesn't re-evaluate scroll needs when navigating into subMenuItems.

Here's the chain:

1. Export options are nested as subMenuItems inside the top-level "Export" action in useSearchBulkActions.ts:737-745. When the user clicks "Export", PopoverMenu replaces its visible items with these submenu items (PopoverMenu.tsx:315-324).

2. On wide screens, SearchBulkActionsButton does NOT pass shouldPopoverUseScrollView to ButtonWithDropdownMenu (SearchBulkActionsButton.tsx:148-177), so it defaults to false (ButtonWithDropdownMenu/index.tsx:57).

3. With shouldUseScrollView=false, PopoverMenu wraps items in a plain <View> instead of a <ScrollView> (PopoverMenu.tsx:182-188), and on desktop it does NOT apply maxHeight because the maxHeight gate requires shouldUseScrollView && shouldEnableMaxHeight (PopoverMenu.tsx:532-533).

4. On narrow screens, shouldPopoverUseScrollView IS passed but is computed from the top-level options count (headerButtonsOptions.length >= 5), NOT the submenu items count (SearchBulkActionsButton.tsx:118). So if there are fewer than 5 top-level actions but 9+ export templates, scrolling still won't be enabled.

What changes do you think we should make in order to solve the problem?

The fix should be in PopoverMenu so it handles this correctly for all consumers that use subMenuItems:

In PopoverMenu.tsx, when the menu navigates into subMenuItems (i.e., enteredSubMenuIndexes.length > 0), dynamically enable scroll wrapping and maxHeight if the current submenu items count exceeds CONST.DROPDOWN_SCROLL_THRESHOLD. This way, the scroll behavior adapts to the actual visible content rather than depending solely on the initial prop value.

Specifically:

• Derive an effective shouldUseScrollView value that accounts for both the prop and the current submenu depth/item count
• Use this derived value in renderWithConditionalWrapper and menuContainerStyle

What alternative solutions did you explore? (Optional)

An alternative is to simply add shouldPopoverUseScrollView to the wide-screen ButtonWithDropdownMenu in SearchBulkActionsButton.tsx (matching the narrow layout pattern). This is simpler but doesn't fix the narrow-screen path where the threshold is based on top-level option count rather than submenu item count, and doesn't help other consumers of PopoverMenu that use subMenuItems.

---

Next Steps for Contributor+ team: Reply with @MelvinBot implement this to create a draft PR, @MelvinBot <your feedback> to refine this analysis, or explain why you are rejecting Melvin's proposal.

[melvin-bot]

Triggered auto assignment to Contributor-plus team member for initial proposal review - @eh2077 (External)

[melvin-bot]

Job added to Upwork: https://www.upwork.com/jobs/~022031392184110107864

[nyomanjyotisa]

🚨 Edited by proposal-police: This proposal was edited at 2026-03-10 16:01:20 UTC.

Proposal

Please re-state the problem that we are trying to solve in this issue.

Exports list on Reports page is not scrollable when export options exceed viewport height

What is the root cause of that problem?

The desktop version of ButtonWithDropdownMenu in SearchBulkActionsButton doesn't enable scrolling for the popover menu. When there are many export formats, the export submenu exceeds the viewport height but isn't scrollable

App/src/components/Search/SearchBulkActionsButton.tsx

Lines 148 to 177 in 26ccc41

	<ButtonWithDropdownMenu
	onPress={() => null}
	shouldAlwaysShowDropdownMenu
	buttonSize={CONST.DROPDOWN_BUTTON_SIZE.SMALL}
	customText={selectionButtonText}
	options={headerButtonsOptions}
	onSubItemSelected={(subItem) =>
	handleBulkPayItemSelected({
	item: subItem,
	triggerKYCFlow,
	isAccountLocked,
	showLockedAccountModal,
	policy: currentPolicy,
	latestBankItems,
	activeAdminPolicies,
	isUserValidated,
	isDelegateAccessRestricted,
	showDelegateNoAccessModal,
	confirmPayment,
	userBillingGraceEndPeriods,
	})
	}
	isSplitButton={false}
	buttonRef={buttonRef}
	anchorAlignment={{
	horizontal: CONST.MODAL.ANCHOR_ORIGIN_HORIZONTAL.LEFT,
	vertical: CONST.MODAL.ANCHOR_ORIGIN_VERTICAL.TOP,
	}}
	sentryLabel={CONST.SENTRY_LABEL.SEARCH.BULK_ACTIONS_DROPDOWN}
	/>

What changes do you think we should make in order to solve the problem?

Add shouldPopoverUseScrollView to the desktop ButtonWithDropdownMenu to enable scrolling when any option has submenu items that exceed the threshold

                                shouldPopoverUseScrollView={headerButtonsOptions.some((option) => (option.subMenuItems?.length ?? 0) >= CONST.DROPDOWN_SCROLL_THRESHOLD)}

App/src/components/Search/SearchBulkActionsButton.tsx

Lines 148 to 177 in 26ccc41

	<ButtonWithDropdownMenu
	onPress={() => null}
	shouldAlwaysShowDropdownMenu
	buttonSize={CONST.DROPDOWN_BUTTON_SIZE.SMALL}
	customText={selectionButtonText}
	options={headerButtonsOptions}
	onSubItemSelected={(subItem) =>
	handleBulkPayItemSelected({
	item: subItem,
	triggerKYCFlow,
	isAccountLocked,
	showLockedAccountModal,
	policy: currentPolicy,
	latestBankItems,
	activeAdminPolicies,
	isUserValidated,
	isDelegateAccessRestricted,
	showDelegateNoAccessModal,
	confirmPayment,
	userBillingGraceEndPeriods,
	})
	}
	isSplitButton={false}
	buttonRef={buttonRef}
	anchorAlignment={{
	horizontal: CONST.MODAL.ANCHOR_ORIGIN_HORIZONTAL.LEFT,
	vertical: CONST.MODAL.ANCHOR_ORIGIN_VERTICAL.TOP,
	}}
	sentryLabel={CONST.SENTRY_LABEL.SEARCH.BULK_ACTIONS_DROPDOWN}
	/>

We can apply the same fix for narrow layout to make it scrollable

App/src/components/Search/SearchBulkActionsButton.tsx

Line 118 in 26ccc41

shouldPopoverUseScrollView={headerButtonsOptions.length >= CONST.DROPDOWN_SCROLL_THRESHOLD}

Note: We need to add shouldPopoverUseScrollView to ButtonWithDropdownMenu in MoneyReportHeader when transactions are selected as well

                                    shouldPopoverUseScrollView={selectedTransactionsOptions.some((option) => (option.subMenuItems?.length ?? 0) >= CONST.DROPDOWN_SCROLL_THRESHOLD)}
                                    wrapperStyle={styles.w100}

App/src/components/MoneyReportHeader.tsx

Lines 1987 to 1995 in 26ccc41

	<ButtonWithDropdownMenu
	onPress={() => null}
	options={selectedTransactionsOptions}
	customText={translate('workspace.common.selected', {
	count: selectedTransactionIDs.length,
	})}
	isSplitButton={false}
	shouldAlwaysShowDropdownMenu
	/>

We can apply the same fix for narrow layout in MoneyRequestReportActionsList to make it scrollable, since it’s currently not scrollable on mobile

iOS-mWeb.Safari.mp4

                        shouldPopoverUseScrollView={selectedTransactionsOptions.some((option) => (option.subMenuItems?.length ?? 0) >= CONST.DROPDOWN_SCROLL_THRESHOLD)}

App/src/components/MoneyRequestReportView/MoneyRequestReportActionsList.tsx

Lines 795 to 802 in 26ccc41

	<ButtonWithDropdownMenu
	onPress={() => null}
	options={selectedTransactionsOptions}
	customText={translate('workspace.common.selected', {count: selectedTransactionIDs.length})}
	isSplitButton={false}
	shouldAlwaysShowDropdownMenu
	wrapperStyle={[styles.w100, styles.ph5]}
	/>

What alternative solutions did you explore? (Optional)

None

[redstoneai]

Proposal

Hello,

I looked at this issue and I think the other proposals miss important part.

Please re-state the problem that we are trying to solve in this issue.

Export options list is not scrollable when user have 9+ export formats. User cannot see all options.

What is the root cause of that problem?

Desktop version of ButtonWithDropdownMenu in SearchBulkActionsButton.tsx missing shouldPopoverUseScrollView prop - this part other proposals found correctly.

But there is another problem. Look at narrow layout code at line 118:

shouldPopoverUseScrollView={headerButtonsOptions.length >= CONST.DROPDOWN_SCROLL_THRESHOLD}

This check headerButtonsOptions.length which is the TOP-LEVEL options count (Export, Delete, Pay, etc), NOT the submenu items count. The threshold is 5.

So if user have 4 top-level options but Export has 9 subMenuItems (export formats), the check is 4 >= 5 which is false. Scroll not enabled even on narrow layout!

What changes do you think we should make in order to solve the problem?

We need check BOTH top-level count AND submenu items count. In SearchBulkActionsButton.tsx:

// Check if any option has large submenu
const hasLargeSubmenu = headerButtonsOptions.some(
    option => (option.subMenuItems?.length ?? 0) >= CONST.DROPDOWN_SCROLL_THRESHOLD
);
const shouldUseScrollView = headerButtonsOptions.length >= CONST.DROPDOWN_SCROLL_THRESHOLD || hasLargeSubmenu;

Then use this for both narrow and desktop:

shouldPopoverUseScrollView={shouldUseScrollView}

Same fix needed in MoneyReportHeader.tsx for consistency.

What alternative solutions did you explore?

1. Just add prop to desktop (other proposal) - This still broken when top-level options < 5 but submenu items > 5
2. Fix in PopoverMenu (MelvinBot proposal) - Too complex, changes core component that many places use

My solution is simple, handles all edge cases, and doesnt require changing core components.

Thanks

[MugheesMb]

Proposal

Please re-state the problem that we are trying to solve in this issue.

When the user opens the Export submenu from the Reports page, the submenu can contain more items than fit in the viewport. In that case, the list is not scrollable, so some export formats become unreachable.

What is the root cause of that problem?

The scroll behavior is decided too early and only from the original menu state.

The issue is in src/components/PopoverMenu.tsx.

PopoverMenu receives a boolean prop called shouldUseScrollView, and that prop is used to decide:

• whether the menu content is wrapped in ScrollView or plain View
• whether desktop maxHeight is applied
• whether the space key should be prevented from scrolling the page

However, once the user enters a submenu, the visible options are no longer menuItems; they become currentMenuItems.

What changes do you think we should make in order to solve the problem?

I would fix this in the shared component so scrolling is based on the currently visible menu, not only the initial prop.

File to change

src/components/PopoverMenu.tsx

Exact change

Add a derived flag inside BasePopoverMenu, after renderedMenuItems is created and before keyboardShortcutSpaceCallback / menuContainerStyle are used:

const shouldUseScrollViewForCurrentMenu =
    shouldUseScrollView || currentMenuItems.length >= CONST.DROPDOWN_SCROLL_THRESHOLD;

Then replace the existing shouldUseScrollView checks in these three places:

1. Space key handling

Change this:

if (shouldUseScrollView) {
    return;
}

to this:

if (shouldUseScrollViewForCurrentMenu) {
    return;
}

2. Desktop max-height logic

Inside menuContainerStyle, change this:

if (shouldUseScrollView && shouldEnableMaxHeight) {
    stylesArray.push({maxHeight: CONST.POPOVER_MENU_MAX_HEIGHT});
}

to this:

if (shouldUseScrollViewForCurrentMenu && shouldEnableMaxHeight) {
    stylesArray.push({maxHeight: CONST.POPOVER_MENU_MAX_HEIGHT});
}

3. Wrapper that chooses ScrollView vs View

Change this:

{renderWithConditionalWrapper(
    shouldUseScrollView,

to this:

{renderWithConditionalWrapper(
    shouldUseScrollViewForCurrentMenu,

This makes the popover react to the menu the user is actually viewing.

So even if the root menu is short, once the user opens a long submenu like Export, currentMenuItems.length will exceed CONST.DROPDOWN_SCROLL_THRESHOLD, and the submenu will automatically:

• render inside a ScrollView
• get the proper max height
• become scrollable on desktop and web

What alternative solutions did you explore? ( Optional )