[Due for payment 2026-03-30] [BACK BUTTON][$250] report-Inconsistent behavior between device and in-app back navigation in 'Paid' filter section

[mitarachim]

• HELD on [CBN] Set new best practices #79039

Version Number: V9.2.3-0
Reproducible in staging?: Yes
Reproducible in production?: Yes
If this was caught during regression testing, add the test name, ID and link from TestRail: #70012
Email or phone of affected tester (no customers): Slottwo1 bxvb@gmail.com
Issue reported by: Applause Internal Team
Device used: Redminote 10s android 13
App Component: User Settings

Action Performed:

1. Launch app
2. Go to reports
3. Tap advance filter - paid - before
4. Tap app back button
5. Note user directed to paid page
6. Tap before
7. Tap device back button
8. Note user directed to filters page

Expected Result:

User should be redirect to "Paid" section page

Actual Result:

User redirect to Filter page

Workaround:

Unknown

Platforms:

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

Screenshots/Videos

Bug6939279_1757407907361.Screenrecorder-2025-09-09-14-14-18-275.mp4

View all open jobs on GitHub

Upwork Automation - Do Not Edit

• Upwork Job URL: https://www.upwork.com/jobs/~021966032516200532736
• Upwork Job ID: 1966032516200532736
• Last Price Increase: 2026-02-14

Issue Owner

Current Issue Owner: @jjcoffee

[melvin-bot]

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

[nkdengineer]

Proposal

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

User redirect to Filter page

What is the root cause of that problem?

We're using modal for the calendar picker

App/src/components/Search/SearchDatePresetFilterBase.tsx

Lines 191 to 196 in a24b0c0

	<CalendarPicker
	value={ephemeralDateValue}
	onSelected={setEphemeralDateValue}
	minDate={CONST.CALENDAR_PICKER.MIN_DATE}
	maxDate={CONST.CALENDAR_PICKER.MAX_DATE}
	/>

so when users press device back button, we'll go to the previous page, it's filter page

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

We can consider to create the new page for CalendarPicker and navigate to the new page in

App/src/components/Search/SearchDatePresetFilterBase.tsx

Line 113 in a24b0c0

onSelectDateModifier(dateModifier);

What specific scenarios should we cover in automated tests to prevent reintroducing this issue in the future?

None

What alternative solutions did you explore? (Optional)

Reminder: Please use plain English, be brief and avoid jargon. Feel free to use images, charts or pseudo-code if necessary. Do not post large multi-line diffs or write walls of text. Do not create PRs unless you have been hired for this job.

[abzokhattab]

Proposal

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

report-Inconsistent behavior between device and in-app back navigation in 'Paid' filter section

What is the root cause of that problem?

• The SearchDatePresetFilterBasePage component only handles app back button navigation through the HeaderWithBackButton component
• Android device back button presses are not intercepted by the component's custom goBack logic
• The component lacks the useHandleBackButton hook that other similar components use to handle device back button consistently
• Device back button follows default React Navigation behavior instead of the component's intended navigation flow

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

• Add useHandleBackButton hook import to SearchDatePresetFilterBasePage component
• Follow the existing pattern used in other components like SearchPageNarrow
• This fix will automatically resolve the issue for all date filter pages (Paid, Date, Submitted, Approved, etc.) since they all use the same base component

    useHandleBackButton(() => {
        goBack();
        return true;
    });

What specific scenarios should we cover in automated tests to prevent reintroducing this issue in the future?

NA

What alternative solutions did you explore? (Optional)

NA

[dmkt9]

Proposal

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

User redirect to Filter page

What is the root cause of that problem?

Currently, CalendarPicker is rendered based on the selectedDateModifier state:

App/src/components/Search/SearchDatePresetFilterBase.tsx

Lines 148 to 197 in 32cf88b

	return !selectedDateModifier ? (
	<>
	{presets?.map((preset) => (
	<SingleSelectListItem
	key={preset}
	showTooltip
	item={{
	text: translate(`search.filters.date.presets.${preset}`),
	isSelected: dateValues[CONST.SEARCH.DATE_MODIFIERS.ON] === preset,
	}}
	onSelectRow={() => setDateValue(CONST.SEARCH.DATE_MODIFIERS.ON, preset)}
	wrapperStyle={styles.flexReset}
	/>
	))}
	{shouldShowHorizontalRule && (
	<SpacerView
	shouldShow
	style={[StyleUtils.getBorderColorStyle(theme.border), styles.mh3]}
	/>
	)}
	<MenuItem
	shouldShowRightIcon
	viewMode={CONST.OPTION_MODE.COMPACT}
	title={translate('common.on')}
	description={dateDisplayValues[CONST.SEARCH.DATE_MODIFIERS.ON]}
	onPress={() => selectDateModifier(CONST.SEARCH.DATE_MODIFIERS.ON)}
	/>
	<MenuItem
	shouldShowRightIcon
	viewMode={CONST.OPTION_MODE.COMPACT}
	title={translate('common.after')}
	description={dateDisplayValues[CONST.SEARCH.DATE_MODIFIERS.AFTER]}
	onPress={() => selectDateModifier(CONST.SEARCH.DATE_MODIFIERS.AFTER)}
	/>
	<MenuItem
	shouldShowRightIcon
	viewMode={CONST.OPTION_MODE.COMPACT}
	title={translate('common.before')}
	description={dateDisplayValues[CONST.SEARCH.DATE_MODIFIERS.BEFORE]}
	onPress={() => selectDateModifier(CONST.SEARCH.DATE_MODIFIERS.BEFORE)}
	/>
	</>
	) : (
	<CalendarPicker
	value={ephemeralDateValue}
	onSelected={setEphemeralDateValue}
	minDate={CONST.CALENDAR_PICKER.MIN_DATE}
	maxDate={CONST.CALENDAR_PICKER.MAX_DATE}
	/>
	);

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

We should wrap CalendarPicker in a Modal component that includes the shouldHandleNavigationBack prop. For example:

<Modal
    type={CONST.MODAL.MODAL_TYPE.RIGHT_DOCKED}
    onClose={() => selectDateModifier(null)}
    isVisible={!!selectedDateModifier}
    shouldHandleNavigationBack
    shouldUseReanimatedModal
    swipeDirection={CONST.SWIPE_DIRECTION.RIGHT}
>

App/src/components/Search/SearchDatePresetFilterBase.tsx

Lines 191 to 196 in 32cf88b

	<CalendarPicker
	value={ephemeralDateValue}
	onSelected={setEphemeralDateValue}
	minDate={CONST.CALENDAR_PICKER.MIN_DATE}
	maxDate={CONST.CALENDAR_PICKER.MAX_DATE}
	/>

Note: Other components such as HeaderWithBackButton, Button, and FormAlertWithSubmitButton should also be wrapped together with CalendarPicker to ensure the layout remains consistent. And the position of can also be considered accordingly.

What specific scenarios should we cover in automated tests to prevent reintroducing this issue in the future?

NA

What alternative solutions did you explore? (Optional)

NA

Reminder: Please use plain English, be brief and avoid jargon. Feel free to use images, charts or pseudo-code if necessary. Do not post large multi-line diffs or write walls of text. Do not create PRs unless you have been hired for this job.

[RachCHopkins]

Can repro.

[melvin-bot]

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

[melvin-bot]

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