[Due for payment 2026-02-20] [$250] Can’t select year in Reports/Search page

[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.10-4
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: @jasperhuangg
Slack conversation (hyperlinked to channel name): #Expensify Bugs

Action Performed:

1. Sign into an account and navigate to the reports page
2. Select “Date”, “After”, click on 2026
3. Select another year.

Expected Result:

The year is selected in the date picker

Actual Result:

All the modals are closed

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

Screen.Recording.2026-01-28.at.11.52.43.AM.mov

Recording.2307.mp4

View all open jobs on GitHub

Upwork Automation - Do Not Edit

• Upwork Job URL: https://www.upwork.com/jobs/~022016614874392354026
• Upwork Job ID: 2016614874392354026
• Last Price Increase: 2026-01-28
• Automatic offers:
• daledah | Contributor | 110291263

Issue Owner

Current Issue Owner: @NicMendonca

[melvin-bot]

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

[melvin-bot]

Triggered auto assignment to @NicMendonca (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.

[melvin-bot]

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

[PiyushChandra17]

I can work on this

[yatin-italy]

Proposal

Restate the problem this issue is trying to solve.

When a user selects a year in the Reports/Search date filter, all open modals close at once. The year is not applied and the user cannot continue selecting a date. This blocks the date filter flow and makes the filter unusable.

What is the root cause of that problem?

The earliest wrong assumption is that the nested YearPickerModal should handle browser navigation. In src/components/DatePicker/CalendarPicker/YearPickerModal.tsx, the YearPickerModal passes shouldHandleNavigationBack={true} to Modal. This assumes the modal should control browser history. That assumption is wrong because this modal is nested. When the modal closes by state change, the Modal logic in src/components/Modal/index.tsx calls window.history.back() inside onModalWillHide(), which navigates back and closes parent modals.

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

• Update src/components/DatePicker/CalendarPicker/YearPickerModal.tsx.
• Remove the shouldHandleNavigationBack prop from the Modal used by YearPickerModal.
• Do not change any other logic.

File: src/components/DatePicker/CalendarPicker/YearPickerModal.tsx

Current code:

<Modal
    type={CONST.MODAL.MODAL_TYPE.RIGHT_DOCKED}
    isVisible={isVisible}
    onClose={() => onClose?.()}
    onModalHide={onClose}
    shouldHandleNavigationBack
    shouldUseCustomBackdrop
    onBackdropPress={onClose}
    enableEdgeToEdgeBottomSafeAreaPadding
>

Updated code:

<Modal
    type={CONST.MODAL.MODAL_TYPE.RIGHT_DOCKED}
    isVisible={isVisible}
    onClose={() => onClose?.()}
    onModalHide={onClose}
    shouldUseCustomBackdrop
    onBackdropPress={onClose}
    enableEdgeToEdgeBottomSafeAreaPadding
>

Reference for the behavior caused by this prop

File: src/components/Modal/index.tsx

const onModalWillHide = () => {
    setStatusBarColor(previousStatusBarColor);
    rest.onModalWillHide?.();
    if ((window.history.state as WindowState)?.shouldGoBack && shouldHandleNavigationBack) {
        window.history.back();
    }
};

What alternative solutions did you explore? (Optional)

• Making shouldHandleNavigationBack conditional for nested modals. Not chosen because it adds extra logic.
• Changing the Modal component to detect programmatic close. Not chosen because it is more complex than needed.

[daledah]

Proposal

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

When selecting a year in the date picker on the reports page, all modals are closed instead of just updating the selected year.

What is the root cause of that problem?

The root cause is that the DropdownButton component is missing the shouldDisplayBelowModals prop on its PopoverWithMeasuredContent.

App/src/components/Search/FilterDropdowns/DropdownButton.tsx

Lines 156 to 179 in 70603fd

	<PopoverWithMeasuredContent
	anchorRef={triggerRef}
	avoidKeyboard
	isVisible={isOverlayVisible}
	onClose={toggleOverlay}
	anchorPosition={popoverTriggerPosition}
	anchorAlignment={ANCHOR_ORIGIN}
	restoreFocusType={CONST.MODAL.RESTORE_FOCUS_TYPE.DELETE}
	shouldEnableNewFocusManagement
	shouldMeasureAnchorPositionFromTop={false}
	outerStyle={{...StyleUtils.getOuterModalStyle(windowHeight, viewportOffsetTop), ...containerStyles}}
	// This must be false because we dont want the modal to close if we open the RHP for selections
	// such as date years
	shouldCloseWhenBrowserNavigationChanged={false}
	innerContainerStyle={containerStyles}
	popoverDimensions={{
	width: CONST.POPOVER_DROPDOWN_WIDTH,
	height: CONST.POPOVER_DROPDOWN_MIN_HEIGHT,
	}}
	shouldSkipRemeasurement
	>
	{popoverContent}
	</PopoverWithMeasuredContent>
	</View>

When the YearPickerModal opens (which uses CONST.MODAL.MODAL_TYPE.RIGHT_DOCKED), it overlays on top of the DateSelectPopup. Without shouldDisplayBelowModals, the parent popover doesn't handle z-index correctly with the nested modal.

The shouldDisplayBelowModals prop ensures that the popover displays below other modals (like SidePanel, RHP - Right Hand Panel, or in this case the YearPickerModal)

However, shouldDisplayBelowModals was not added, which is also necessary for proper nested modal behavior.

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

Add shouldDisplayBelowModals prop to the PopoverWithMeasuredContent in DropdownButton.tsx:

<PopoverWithMeasuredContent
    anchorRef={triggerRef}
    avoidKeyboard
    ...
    shouldSkipRemeasurement
+   shouldDisplayBelowModals
>
    {popoverContent}
</PopoverWithMeasuredContent>

This is consistent with how DatePickerModal.tsx handles the same scenario:

App/src/components/DatePicker/DatePickerModal.tsx

Line 79 in 70603fd

shouldDisplayBelowModals

Screen.Recording.2026-01-29.at.04.07.32.mov

What alternative solutions did you explore? (Optional)

NA

[bilalup]

Proposal

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

When a user opens the date picker in the Reports filter, clicks to select a year (e.g., "2026"), and then tries to pick a different year, all open modals—the year picker and the main calendar—close unexpectedly. This prevents the user from completing their date selection and breaks the filtering workflow.

What is the root cause of that problem?

The root cause is the shouldHandleNavigationBack prop on the Modal inside YearPickerModal. This prop is designed to handle browser back button navigation but is incorrectly used on a nested modal. When the YearPickerModal closes, it triggers window.history.back() in the parent Modal component’s onModalWillHide lifecycle, which forces a browser navigation event. This navigation event causes React to unmount and close all open modals in the stack.

Problem Location:
src/components/DatePicker/CalendarPicker/YearPickerModal.tsx

Problem Prop:
shouldHandleNavigationBack={true}

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

Remove the shouldHandleNavigationBack prop from the Modal component in YearPickerModal. This prop is unnecessary for this nested modal context and is the direct trigger for the unintended browser navigation that closes all modals.

File to modify:
src/components/DatePicker/CalendarPicker/YearPickerModal.tsx

Current Code:

<Modal
    type={CONST.MODAL.MODAL_TYPE.RIGHT_DOCKED}
    isVisible={isVisible}
    onClose={() => onClose?.()}
    onModalHide={onClose}
    shouldHandleNavigationBack
    shouldUseCustomBackdrop
    onBackdropPress={onClose}
    enableEdgeToEdgeBottomSafeAreaPadding
>

Proposed Code:

<Modal
    type={CONST.MODAL.MODAL_TYPE.RIGHT_DOCKED}
    isVisible={isVisible}
    onClose={() => onClose?.()}
    onModalHide={onClose}
    shouldUseCustomBackdrop
    onBackdropPress={onClose}
    enableEdgeToEdgeBottomSafeAreaPadding
>

Explanation of the Fix:
The YearPickerModal is a child modal opened on top of the main calendar picker. It should not manipulate browser history. The shouldHandleNavigationBack prop is intended for top-level modals that need to respond to the hardware or software back button (for example, on mobile). Removing it prevents the call to window.history.back() in the parent Modal component, stopping the chain reaction that closes all modals.

Reference – How the prop causes the issue (src/components/Modal/index.tsx):

const onModalWillHide = () => {
    if (
        (window.history.state as WindowState)?.shouldGoBack &&
        shouldHandleNavigationBack
    ) {
        window.history.back();
    }
};

What alternative solutions did you explore? (Optional)

1. Conditional Logic for Nested Modals: Adding a check (for example, isNestedModal) to conditionally apply shouldHandleNavigationBack. This adds complexity for a prop that should not be used here.
2. Modifying the onModalWillHide Logic in the Base Modal: Changing the base Modal component to differentiate between user-triggered and programmatic closes. This is a riskier, broader change with potential side effects.
3. Using event.stopPropagation(): This would not address the core navigation issue, as the closure is triggered by a browser history event, not UI event bubbling.