Report - "Delete" option in dropdown menu, overlaps with device´s three button navigation

[mitarachim]

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.23.2
Reproducible in staging?: Yes
Reproducible in production?: Yes
If this was caught during regression testing, add the test name, ID and link from BrowserStack: https://test-management.browserstack.com/projects/2219752/test-runs/TR-5795/folder/13176670/41237133/1201036441?q=more&issue_type=jira
Email or phone of affected tester (no customers): ibellicotest+2250@gmail.com
Issue reported by: Applause Internal Team
Bug source: Exploratory - Significant User Experience Deterioration
Device used: Motorola MotoG60 / Android 12 (Hybrid app)
App Component: Money Requests

Action Performed:

Prerequisite: Account has at least one workspace.

1. Open the Expensify app.
2. Open any workspace chat.
3. Create two manual expenses.
4. Open the report of the just created expenses.
5. Tap on "Submit"
6. Long tap and select one of the expenses.
7. Tap on the dropdown menu.
8. Note that "Delete" option overlaps device´s three button navigation and menu can´t be scrolled.

Expected Result:

After selecting an expense, all the options in menu should be completelly visible and menu should be scrollable if all options are not visible.

Actual Result:

After selecting an expense on report, "Delete" option in dropdown menu, overlaps device´s three button navigation and menu can´t be scrolled.

Workaround:

Unknown

Platforms:

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

Screenshots/Videos

Bug7083038_1771547756497.Three.mp4

View all open jobs on GitHub

[annaweber830]

Proposal

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

When users open the expense selection dropdown on small-screen Android devices, the action list can extend into the system navigation area. The bottom action ("Delete") becomes partially hidden and inaccessible because the menu does not become scrollable.

What is the root cause of that problem?

• On small screens, the context menu is rendered as a bottom-docked modal:

  App/src/components/PopoverWithMeasuredContent/index.tsx

  Lines 31 to 39 in 480fd3d

  	if (isSmallScreenWidth) {
  	return (
  	<Modal
  	// eslint-disable-next-line react/jsx-props-no-spreading
  	{...props}
  	type={CONST.MODAL.MODAL_TYPE.BOTTOM_DOCKED}
  	animationIn="slideInUp"
  	animationOut="slideOutDown"
  	/>

• The report-action context menu renders all menu items inside a plain View (no scroll container and no bounded max height for mobile):

  App/src/pages/inbox/report/ContextMenu/BaseReportActionContextMenu.tsx

  Lines 364 to 447 in 480fd3d

  	(isVisible || shouldKeepOpen || !isMini) && (
  	<FocusTrapForModal active={!isMini && !isSmallScreenWidth && (isVisible || shouldKeepOpen)}>
  	<View
  	ref={contentRef}
  	style={wrapperStyle}
  	>
  	{filteredContextMenuActions.map((contextAction, index) => {
  	const closePopup = !isMini;
  	const payload: ContextMenuActionPayload = {
  	reportActions,
  	// eslint-disable-next-line @typescript-eslint/non-nullable-type-assertion-style
  	reportAction: (reportAction ?? null) as ReportAction,
  	reportID,
  	originalReportID,
  	report,
  	draftMessage,
  	selection,
  	close: () => setShouldKeepOpen(false),
  	transitionActionSheetState,
  	openContextMenu: () => setShouldKeepOpen(true),
  	interceptAnonymousUser,
  	openOverflowMenu,
  	setIsEmojiPickerActive,
  	isHarvestReport,
  	moneyRequestAction,
  	card,
  	originalReport,
  	isTryNewDotNVPDismissed,
  	childReport,
  	movedFromReport,
  	movedToReport,
  	getLocalDateFromDatetime,
  	policy,
  	policyTags,
  	translate,
  	harvestReport,
  	introSelected,
  	isDelegateAccessRestricted,
  	showDelegateNoAccessModal,
  	currentUserAccountID: currentUserPersonalDetails?.accountID,
  	currentUserPersonalDetails,
  	};
  	if ('renderContent' in contextAction) {
  	return contextAction.renderContent(closePopup, payload);
  	}
  	const {textTranslateKey} = contextAction;
  	const isKeyInActionUpdateKeys = textTranslateKey === 'reportActionContextMenu.editAction' || textTranslateKey === 'reportActionContextMenu.deleteConfirmation';
  	const text = textTranslateKey && (isKeyInActionUpdateKeys ? translate(textTranslateKey, {action: moneyRequestAction ?? reportAction}) : translate(textTranslateKey));
  	const transactionPayload = textTranslateKey === 'reportActionContextMenu.copyMessage' && transaction && {transaction};
  	const isMenuAction = textTranslateKey === 'reportActionContextMenu.menu';
  	const icon = typeof contextAction.icon === 'string' ? icons[contextAction.icon] : contextAction.icon;
  	const successIcon = typeof contextAction.successIcon === 'string' ? icons[contextAction.successIcon] : contextAction.successIcon;
  	return (
  	<ContextMenuItem
  	buttonRef={isMenuAction ? threeDotRef : {current: null}}
  	icon={icon}
  	text={text ?? ''}
  	successIcon={successIcon}
  	successText={contextAction.successTextTranslateKey ? translate(contextAction.successTextTranslateKey) : undefined}
  	isMini={isMini}
  	key={contextAction.textTranslateKey}
  	onPress={(event) =>
  	interceptAnonymousUser(
  	() => contextAction.onPress?.(closePopup, {...payload, ...transactionPayload, event, ...(isMenuAction ? {anchorRef: threeDotRef} : {})}),
  	contextAction.isAnonymousAction,
  	)
  	}
  	description={contextAction.getDescription?.(selection) ?? ''}
  	isAnonymousAction={contextAction.isAnonymousAction}
  	isFocused={focusedIndex === index}
  	shouldPreventDefaultFocusOnPress={contextAction.shouldPreventDefaultFocusOnPress}
  	onFocus={() => setFocusedIndex(index)}
  	onBlur={() => (index === filteredContextMenuActions.length - 1 || index === 1) && setFocusedIndex(-1)}
  	disabled={contextAction?.shouldDisable ? contextAction?.shouldDisable(download) : false}
  	shouldShowLoadingSpinnerIcon={contextAction?.shouldDisable ? contextAction?.shouldDisable(download) : false}
  	sentryLabel={contextAction.sentryLabel}
  	/>
  	);
  	})}
  	</View>
  	</FocusTrapForModal>

<FocusTrapForModal active={!isMini && !isSmallScreenWidth && (isVisible || shouldKeepOpen)}>
    <View
        ref={contentRef}
        style={wrapperStyle}
    >
        {filteredContextMenuActions.map((contextAction, index) => {
            // ...render each ContextMenuItem
            return (
                <ContextMenuItem
                    // ...props
                />
            );
        })}
    </View>
</FocusTrapForModal>

This causes overflow on tall menus because the container cannot scroll when content exceeds the visible bottom-docked area, so the final actions can sit behind Android's three-button navigation region.

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

Existing proposals review:

• No proposal comments currently exist on this issue, so there is no prior optimized fix to reuse.

Use the same mobile menu pattern used elsewhere (ScrollView + mobile max height) for report-action context menus, but only on narrow layouts.

• Change location:

  App/src/pages/inbox/report/ContextMenu/BaseReportActionContextMenu.tsx

  Lines 112 to 447 in 480fd3d

  	function BaseReportActionContextMenu({
  	type = CONST.CONTEXT_MENU_TYPES.REPORT_ACTION,
  	anchor,
  	contentRef,
  	isChronosReport = false,
  	isArchivedRoom = false,
  	isMini = false,
  	isVisible = false,
  	isPinnedChat = false,
  	isUnreadChat = false,
  	isThreadReportParentAction = false,
  	selection = '',
  	draftMessage = '',
  	reportActionID,
  	reportID,
  	originalReportID,
  	checkIfContextMenuActive,
  	disabledActions = [],
  	setIsEmojiPickerActive,
  	}: BaseReportActionContextMenuProps) {
  	const {transitionActionSheetState} = ActionSheetAwareScrollView.useActionSheetAwareScrollViewActions();
  	const {isDelegateAccessRestricted} = useDelegateNoAccessState();
  	const {showDelegateNoAccessModal} = useDelegateNoAccessActions();
  	const icons = useMemoizedLazyExpensifyIcons([
  	'Download',
  	'ThreeDots',
  	'ChatBubbleReply',
  	'ChatBubbleUnread',
  	'Mail',
  	'Pencil',
  	'Stopwatch',
  	'Bell',
  	'Copy',
  	'LinkCopy',
  	'Pin',
  	'Flag',
  	'Bug',
  	'Trashcan',
  	'Checkmark',
  	'Concierge',
  	] as const);
  	const StyleUtils = useStyleUtils();
  	const {translate, getLocalDateFromDatetime} = useLocalize();
  	// eslint-disable-next-line rulesdir/prefer-shouldUseNarrowLayout-instead-of-isSmallScreenWidth
  	const {shouldUseNarrowLayout, isSmallScreenWidth} = useResponsiveLayout();
  	const [shouldKeepOpen, setShouldKeepOpen] = useState(false);
  	const wrapperStyle = StyleUtils.getReportActionContextMenuStyles(isMini, shouldUseNarrowLayout);
  	const {isOffline} = useNetwork();
  	const {isProduction} = useEnvironment();
  	const threeDotRef = useRef<View>(null);
  	const [betas] = useOnyx(ONYXKEYS.BETAS, {canBeMissing: true});
  	const [reportActions] = useOnyx(`${ONYXKEYS.COLLECTION.REPORT_ACTIONS}${reportID}`, {
  	canBeMissing: true,
  	canEvict: false,
  	selector: withDEWRoutedActionsObject,
  	});
  	const [originalReportActions] = useOnyx(`${ONYXKEYS.COLLECTION.REPORT_ACTIONS}${originalReportID}`, {
  	canBeMissing: true,
  	canEvict: false,
  	selector: withDEWRoutedActionsObject,
  	});
  	const reportAction: OnyxEntry<ReportAction> = useMemo(() => {
  	if (isEmptyObject(originalReportActions) || reportActionID === '0' || reportActionID === '-1' || !reportActionID) {
  	return;
  	}
  	return originalReportActions[reportActionID];
  	}, [originalReportActions, reportActionID]);
  	const transactionID = getLinkedTransactionID(reportAction);
  	const [transaction] = useOnyx(`${ONYXKEYS.COLLECTION.TRANSACTION}${getNonEmptyStringOnyxID(transactionID)}`, {canBeMissing: true});
  	const [isDebugModeEnabled] = useOnyx(ONYXKEYS.IS_DEBUG_MODE_ENABLED, {canBeMissing: true});
  	const [report] = useOnyx(`${ONYXKEYS.COLLECTION.REPORT}${reportID}`, {canBeMissing: true});
  	const [reportNameValuePairs] = useOnyx(`${ONYXKEYS.COLLECTION.REPORT_NAME_VALUE_PAIRS}${getNonEmptyStringOnyxID(reportID)}`, {canBeMissing: true});
  	const [harvestReport] = useOnyx(`${ONYXKEYS.COLLECTION.REPORT}${getNonEmptyStringOnyxID(getHarvestOriginalReportID(reportNameValuePairs?.origin, reportNameValuePairs?.originalID))}`, {
  	canBeMissing: true,
  	});
  	const [originalReport] = useOnyx(`${ONYXKEYS.COLLECTION.REPORT}${originalReportID}`, {canBeMissing: true});
  	const isOriginalReportArchived = useReportIsArchived(originalReportID);
  	const policyID = report?.policyID;
  	const [policy] = useOnyx(`${ONYXKEYS.COLLECTION.POLICY}${policyID}`, {canBeMissing: true});
  	const [policyTags] = useOnyx(`${ONYXKEYS.COLLECTION.POLICY_TAGS}${policyID}`, {canBeMissing: true});
  	const [movedFromReport] = useOnyx(`${ONYXKEYS.COLLECTION.REPORT}${getMovedReportID(reportAction, CONST.REPORT.MOVE_TYPE.FROM)}`, {canBeMissing: true});
  	const [movedToReport] = useOnyx(`${ONYXKEYS.COLLECTION.REPORT}${getMovedReportID(reportAction, CONST.REPORT.MOVE_TYPE.TO)}`, {canBeMissing: true});
  	const sourceID = getSourceIDFromReportAction(reportAction);
  	const [download] = useOnyx(`${ONYXKEYS.COLLECTION.DOWNLOAD}${sourceID}`, {canBeMissing: true});
  	const [childReport] = useOnyx(`${ONYXKEYS.COLLECTION.REPORT}${reportAction?.childReportID}`, {canBeMissing: true});
  	const [childReportActions] = useOnyx(`${ONYXKEYS.COLLECTION.REPORT_ACTIONS}${reportAction?.childReportID}`, {canBeMissing: true});
  	const [childChatReport] = useOnyx(`${ONYXKEYS.COLLECTION.REPORT}${childReport?.chatReportID}`, {canBeMissing: true});
  	const parentReportAction = getReportAction(childReport?.parentReportID, childReport?.parentReportActionID);
  	const {reportActions: paginatedReportActions} = usePaginatedReportActions(childReport?.reportID);
  	const currentUserPersonalDetails = useCurrentUserPersonalDetails();
  	const transactionThreadReportID = useMemo(
  	() => getOneTransactionThreadReportID(childReport, childChatReport, paginatedReportActions ?? [], isOffline),
  	[paginatedReportActions, isOffline, childReport, childChatReport],
  	);
  	const [transactionThreadReport] = useOnyx(`${ONYXKEYS.COLLECTION.REPORT}${getNonEmptyStringOnyxID(transactionThreadReportID)}`, {canBeMissing: true});
  	const isMoneyRequestReport = useMemo(() => ReportUtilsIsMoneyRequestReport(childReport), [childReport]);
  	const isInvoiceReport = useMemo(() => ReportUtilsIsInvoiceReport(childReport), [childReport]);
  	const requestParentReportAction = useMemo(() => {
  	if (isMoneyRequestReport || isInvoiceReport) {
  	if (transactionThreadReportID === CONST.FAKE_REPORT_ID) {
  	return Object.values(childReportActions ?? {}).find((action) => action.actionName === CONST.REPORT.ACTIONS.TYPE.IOU && !isDeletedAction(action));
  	}
  	if (!paginatedReportActions || !transactionThreadReport?.parentReportActionID) {
  	return undefined;
  	}
  	return paginatedReportActions.find((action) => action.reportActionID === transactionThreadReport.parentReportActionID);
  	}
  	return parentReportAction;
  	}, [parentReportAction, isMoneyRequestReport, isInvoiceReport, paginatedReportActions, transactionThreadReport?.parentReportActionID, transactionThreadReportID, childReportActions]);
  	const moneyRequestAction = transactionThreadReportID ? requestParentReportAction : parentReportAction;
  	const isChildReportArchived = useReportIsArchived(childReport?.reportID);
  	const isParentReportArchived = useReportIsArchived(childReport?.parentReportID);
  	const [parentReport] = useOnyx(`${ONYXKEYS.COLLECTION.REPORT}${childReport?.parentReportID}`, {canBeMissing: true});
  	const iouTransactionID = (getOriginalMessage(moneyRequestAction ?? reportAction) as OriginalMessageIOU)?.IOUTransactionID;
  	const [iouTransaction] = useOnyx(`${ONYXKEYS.COLLECTION.TRANSACTION}${getNonEmptyStringOnyxID(iouTransactionID)}`, {canBeMissing: true});
  	const iouReportID = (getOriginalMessage(moneyRequestAction ?? reportAction) as OriginalMessageIOU)?.IOUReportID;
  	const [moneyRequestReport] = useOnyx(`${ONYXKEYS.COLLECTION.REPORT}${iouReportID}`, {canBeMissing: true});
  	const [moneyRequestPolicy] = useOnyx(`${ONYXKEYS.COLLECTION.POLICY}${moneyRequestReport?.policyID}`, {canBeMissing: true});
  	const {transactions} = useTransactionsAndViolationsForReport(childReport?.reportID);
  	const [tryNewDot] = useOnyx(ONYXKEYS.NVP_TRY_NEW_DOT, {canBeMissing: true});
  	const [introSelected] = useOnyx(ONYXKEYS.NVP_INTRO_SELECTED, {canBeMissing: true});
  	const isTryNewDotNVPDismissed = !!tryNewDot?.classicRedirect?.dismissed;
  	const isMoneyRequest = useMemo(() => ReportUtilsIsMoneyRequest(childReport), [childReport]);
  	const isTrackExpenseReport = ReportUtilsIsTrackExpenseReport(childReport);
  	const isSingleTransactionView = isMoneyRequest || isTrackExpenseReport;
  	const isMoneyRequestOrReport = isMoneyRequestReport || isSingleTransactionView;
  	const areHoldRequirementsMet =
  	!isInvoiceReport &&
  	isMoneyRequestOrReport &&
  	!isArchivedNonExpenseReport(transactionThreadReportID ? childReport : parentReport, transactionThreadReportID ? isChildReportArchived : isParentReportArchived);
  	const shouldEnableArrowNavigation = !isMini && (isVisible || shouldKeepOpen);
  	const isHarvestReport = isHarvestCreatedExpenseReport(reportNameValuePairs?.origin, reportNameValuePairs?.originalID);
  	let filteredContextMenuActions = ContextMenuActions.filter(
  	(contextAction) =>
  	!disabledActions.includes(contextAction) &&
  	contextAction.shouldShow({
  	type,
  	reportAction,
  	childReportActions,
  	isArchivedRoom,
  	betas,
  	menuTarget: anchor,
  	isChronosReport,
  	reportID,
  	isPinnedChat,
  	isUnreadChat,
  	isThreadReportParentAction,
  	isOffline: !!isOffline,
  	isMini,
  	isProduction,
  	moneyRequestReport,
  	moneyRequestAction,
  	moneyRequestPolicy,
  	areHoldRequirementsMet,
  	isDebugModeEnabled,
  	iouTransaction,
  	transactions,
  	isHarvestReport,
  	}),
  	);
  	if (isMini) {
  	const menuAction = filteredContextMenuActions.at(-1);
  	const otherActions = filteredContextMenuActions.slice(0, -1);
  	if (otherActions.length > CONST.MINI_CONTEXT_MENU_MAX_ITEMS && menuAction) {
  	filteredContextMenuActions = otherActions.slice(0, CONST.MINI_CONTEXT_MENU_MAX_ITEMS - 1);
  	filteredContextMenuActions.push(menuAction);
  	} else {
  	filteredContextMenuActions = otherActions;
  	}
  	}
  	// Context menu actions that are not rendered as menu items are excluded from arrow navigation
  	const nonMenuItemActionIndexes = filteredContextMenuActions.map((contextAction, index) =>
  	'renderContent' in contextAction && typeof contextAction.renderContent === 'function' ? index : undefined,
  	);
  	const disabledIndexes = nonMenuItemActionIndexes.filter((index): index is number => index !== undefined);
  	const [focusedIndex, setFocusedIndex] = useArrowKeyFocusManager({
  	initialFocusedIndex: -1,
  	disabledIndexes,
  	maxIndex: filteredContextMenuActions.length - 1,
  	isActive: shouldEnableArrowNavigation,
  	});
  	/**
  	* Checks if user is anonymous. If true and the action doesn't accept for anonymous user, hides the context menu and
  	* shows the sign in modal. Else, executes the callback.
  	*/
  	const interceptAnonymousUser = (callback: () => void, isAnonymousAction = false) => {
  	if (isAnonymousUser() && !isAnonymousAction) {
  	hideContextMenu(false);
  	// eslint-disable-next-line @typescript-eslint/no-deprecated
  	InteractionManager.runAfterInteractions(() => {
  	signOutAndRedirectToSignIn();
  	});
  	} else {
  	callback();
  	}
  	};
  	useRestoreInputFocus(isVisible);
  	const openOverflowMenu = (event: GestureResponderEvent | MouseEvent, anchorRef: RefObject<View | null>) => {
  	showContextMenu({
  	type: CONST.CONTEXT_MENU_TYPES.REPORT_ACTION,
  	event,
  	selection,
  	contextMenuAnchor: anchorRef?.current as ViewType | RNText | null,
  	report: {
  	reportID,
  	originalReportID,
  	isArchivedRoom: isArchivedNonExpenseReport(originalReport, isOriginalReportArchived),
  	isChronos: chatIncludesChronosWithID(originalReportID),
  	},
  	reportAction: {
  	reportActionID: reportAction?.reportActionID,
  	draftMessage,
  	isThreadReportParentAction,
  	},
  	callbacks: {
  	onShow: checkIfContextMenuActive,
  	onHide: () => {
  	checkIfContextMenuActive?.();
  	setShouldKeepOpen(false);
  	},
  	},
  	disabledOptions: filteredContextMenuActions,
  	shouldCloseOnTarget: true,
  	isOverflowMenu: true,
  	});
  	};
  	// eslint-disable-next-line @typescript-eslint/non-nullable-type-assertion-style
  	const card = useGetExpensifyCardFromReportAction({reportAction: (reportAction ?? null) as ReportAction, policyID});
  	return (
  	(isVisible || shouldKeepOpen || !isMini) && (
  	<FocusTrapForModal active={!isMini && !isSmallScreenWidth && (isVisible || shouldKeepOpen)}>
  	<View
  	ref={contentRef}
  	style={wrapperStyle}
  	>
  	{filteredContextMenuActions.map((contextAction, index) => {
  	const closePopup = !isMini;
  	const payload: ContextMenuActionPayload = {
  	reportActions,
  	// eslint-disable-next-line @typescript-eslint/non-nullable-type-assertion-style
  	reportAction: (reportAction ?? null) as ReportAction,
  	reportID,
  	originalReportID,
  	report,
  	draftMessage,
  	selection,
  	close: () => setShouldKeepOpen(false),
  	transitionActionSheetState,
  	openContextMenu: () => setShouldKeepOpen(true),
  	interceptAnonymousUser,
  	openOverflowMenu,
  	setIsEmojiPickerActive,
  	isHarvestReport,
  	moneyRequestAction,
  	card,
  	originalReport,
  	isTryNewDotNVPDismissed,
  	childReport,
  	movedFromReport,
  	movedToReport,
  	getLocalDateFromDatetime,
  	policy,
  	policyTags,
  	translate,
  	harvestReport,
  	introSelected,
  	isDelegateAccessRestricted,
  	showDelegateNoAccessModal,
  	currentUserAccountID: currentUserPersonalDetails?.accountID,
  	currentUserPersonalDetails,
  	};
  	if ('renderContent' in contextAction) {
  	return contextAction.renderContent(closePopup, payload);
  	}
  	const {textTranslateKey} = contextAction;
  	const isKeyInActionUpdateKeys = textTranslateKey === 'reportActionContextMenu.editAction' || textTranslateKey === 'reportActionContextMenu.deleteConfirmation';
  	const text = textTranslateKey && (isKeyInActionUpdateKeys ? translate(textTranslateKey, {action: moneyRequestAction ?? reportAction}) : translate(textTranslateKey));
  	const transactionPayload = textTranslateKey === 'reportActionContextMenu.copyMessage' && transaction && {transaction};
  	const isMenuAction = textTranslateKey === 'reportActionContextMenu.menu';
  	const icon = typeof contextAction.icon === 'string' ? icons[contextAction.icon] : contextAction.icon;
  	const successIcon = typeof contextAction.successIcon === 'string' ? icons[contextAction.successIcon] : contextAction.successIcon;
  	return (
  	<ContextMenuItem
  	buttonRef={isMenuAction ? threeDotRef : {current: null}}
  	icon={icon}
  	text={text ?? ''}
  	successIcon={successIcon}
  	successText={contextAction.successTextTranslateKey ? translate(contextAction.successTextTranslateKey) : undefined}
  	isMini={isMini}
  	key={contextAction.textTranslateKey}
  	onPress={(event) =>
  	interceptAnonymousUser(
  	() => contextAction.onPress?.(closePopup, {...payload, ...transactionPayload, event, ...(isMenuAction ? {anchorRef: threeDotRef} : {})}),
  	contextAction.isAnonymousAction,
  	)
  	}
  	description={contextAction.getDescription?.(selection) ?? ''}
  	isAnonymousAction={contextAction.isAnonymousAction}
  	isFocused={focusedIndex === index}
  	shouldPreventDefaultFocusOnPress={contextAction.shouldPreventDefaultFocusOnPress}
  	onFocus={() => setFocusedIndex(index)}
  	onBlur={() => (index === filteredContextMenuActions.length - 1 || index === 1) && setFocusedIndex(-1)}
  	disabled={contextAction?.shouldDisable ? contextAction?.shouldDisable(download) : false}
  	shouldShowLoadingSpinnerIcon={contextAction?.shouldDisable ? contextAction?.shouldDisable(download) : false}
  	sentryLabel={contextAction.sentryLabel}
  	/>
  	);
  	})}
  	</View>
  	</FocusTrapForModal>

Current code:

return (
    (isVisible || shouldKeepOpen || !isMini) && (
        <FocusTrapForModal active={!isMini && !isSmallScreenWidth && (isVisible || shouldKeepOpen)}>
            <View
                ref={contentRef}
                style={wrapperStyle}
            >
                {filteredContextMenuActions.map((contextAction, index) => {
                    // ...render ContextMenuItem
                })}
            </View>
        </FocusTrapForModal>
    )
);

Updated code:

import ScrollView from '@components/ScrollView';

const shouldUseScrollableMenu = !isMini && isSmallScreenWidth;
const renderedMenuItems = filteredContextMenuActions.map((contextAction, index) => {
    // ...existing ContextMenuItem rendering
});

return (
    (isVisible || shouldKeepOpen || !isMini) && (
        <FocusTrapForModal active={!isMini && !isSmallScreenWidth && (isVisible || shouldKeepOpen)}>
            <View
                ref={contentRef}
                style={shouldUseScrollableMenu ? undefined : wrapperStyle}
            >
                {shouldUseScrollableMenu ? (
                    <ScrollView
                        style={{maxHeight: CONST.POPOVER_MENU_MAX_HEIGHT_MOBILE}}
                        contentContainerStyle={wrapperStyle}
                        showsVerticalScrollIndicator
                    >
                        {renderedMenuItems}
                    </ScrollView>
                ) : (
                    renderedMenuItems
                )}
            </View>
        </FocusTrapForModal>
    )
);

This keeps desktop behavior unchanged, while ensuring mobile users can scroll long action lists and always reach the "Delete" row above system navigation.

What alternative solutions did you explore? (Optional)

• Increase static bottom padding in the menu container only. I did not choose this because it does not solve tall-menu clipping and still leaves inaccessible actions when the list is longer than the viewport.
• Reduce the number of visible actions on mobile. I did not choose this because it changes available functionality and can hide required actions.

[abbasifaizan70]

Proposal

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

After selecting an expense on the report, the "Delete" option in the dropdown menu overlaps the device's three-button navigation and the menu can't be scrolled.

---

What is the root cause of that problem?

On small screens, the selected-transactions dropdown is rendered by ButtonWithDropdownMenu, which uses PopoverMenu for the action list (Hold, Reject, Export, Merge, Move expense, Split, Delete). Two issues cause the bug:

1. Bottom safe area not applied: Bottom safe area padding is only passed to the popover’s scroll/content container when shouldUseModalPaddingStyle is false. The selected-transactions menu uses the default shouldUseModalPaddingStyle === true, so no bottom padding is applied and the last option is drawn under the system navigation bar.

   App/src/components/ButtonWithDropdownMenu/index.tsx

   Lines 276 to 281 in 12e9523

   	anchorPosition={popoverAnchorPosition}
   	shouldShowSelectedItemCheck={shouldShowSelectedItemCheck}
   	anchorRef={nullCheckRef(dropdownAnchor)}
   	scrollContainerStyle={!shouldUseModalPaddingStyle && isSmallScreenWidth && {...styles.pt4, paddingBottom}}
   	anchorAlignment={anchorAlignment}
   	shouldUseModalPaddingStyle={shouldUseModalPaddingStyle}

2. Menu not scrollable: The popover content is only wrapped in a ScrollView when shouldUseScrollView is true. The selected-transactions dropdown never passes shouldPopoverUseScrollView, so the menu is rendered in a non-scrollable View. With many options and a fixed max height on mobile, the list overflows and the last items are clipped and unreachable.

   App/src/components/PopoverMenu.tsx

   Line 293 in 12e9523

   shouldUpdateFocusedIndex = true,

App/src/CONST/index.ts

Lines 248 to 249 in 12e9523

	POPOVER_MENU_MAX_HEIGHT: 496,
	POPOVER_MENU_MAX_HEIGHT_MOBILE: 432,

---

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

Apply bottom safe area on small screens for all dropdowns, and enable a scrollable popover for the selected-transactions menu so every option is visible and reachable.

File: App/src/components/ButtonWithDropdownMenu/index.tsx

-                    scrollContainerStyle={!shouldUseModalPaddingStyle && isSmallScreenWidth && {...styles.pt4, paddingBottom}}
+                    scrollContainerStyle={
+                        isSmallScreenWidth
+                            ? shouldUseModalPaddingStyle
+                                ? {paddingBottom}
+                                : {...styles.pt4, paddingBottom}
+                            : undefined
+                    }

File: App/src/components/MoneyReportHeader.tsx

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

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

File: App/src/components/MoneyRequestReportView/MoneyRequestReportActionsList.tsx

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

[melvin-bot]

Whoops! This issue is 2 days overdue. Let's get this updated quick!

[melvin-bot]

12 days overdue now... This issue's end is nigh!

[melvin-bot]

This issue has not been updated in over 14 days. eroding to Weekly issue.