Reports - Inconsistent behavior of "Range" text on "Date" exposed filter and "Filters" page

[lanitochka17]

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.52.0
Reproducible in staging?: Yes
Reproducible in production?: N/A - new feature, doesn't exist in prod
If this was caught during regression testing, add the test name, ID and link from BrowserStack: #85313
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: Search

Action Performed:

1. Open the Expensify app.
2. Navigate to "Reports" > "Expenses"
3. Tap on "Date" exposed filter and select "Custom Range"
4. Select any date on "From" calendar.
5. Note that a "Range" text with the selected date appears on the bottom of the screen.
6. Select any date on remaining calendar.
7. Note that date appears too on "Range" at the bottom of the screen.
8. Return to "Expenses" without applying the filter.
9. Tap on "Filters"
10. Scroll down to "Date" and open the field.
11. Tap on "Custom Range"
12. Apply any date on each calendar.
13. Note that "Range" text is not displayed at the bottom of the page if the user doesn´t scroll to the bottom.

Expected Result:

"Range" text should appear on the bottom of the screen after selecting any date on any calendar on "Custom Range", without the user having to scroll down.

Actual Result:

Behavior of "Range" text after selecting dates on calendar on "Custom Range" is different on exposed filter and on filter opened from "Filters" page.
If user selects any date on calendars on "Custom Range" on exposed filter, "Range" text appears automatically on the bottom of the screen, without the need of scrolling down.
When user selects dates from "Filters" page, "Custom" text is not visible without scrolling down.

Workaround:

Unknown

Platforms:

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

Screenshots/Videos

Bug7120227_1775164933954.Custom_7.mp4

View all open jobs on GitHub

[melvin-bot]

You have been assigned to this deploy blocker because you recently merged this PR: #85313

[melvin-bot]

💬 A slack conversation has been started in #expensify-open-source

[github-actions]

👋 Friendly reminder that deploy blockers are time-sensitive ⏱ issues! Check out the open `StagingDeployCash` deploy checklist to see the list of PRs included in this release, then work quickly to do one of the following:

1. Identify the pull request that introduced this issue and revert it.
2. Find someone who can quickly fix the issue.
3. Fix the issue yourself.

[MelvinBot]

Proposal

What is the root cause of that problem?

The Filters page (DateFilterBase.tsx) renders the "Range" text inside the ScrollView after two vertically-stacked calendars (forceVerticalCalendars prop), pushing it below the visible viewport. There is no auto-scroll logic to bring it into view.

In contrast, the exposed filter (DateSelectPopup/index.tsx) renders the "Range" text outside the ScrollView as a fixed element, so it's always visible at the bottom without scrolling.

Evidence

Filters page — Range text inside ScrollView at src/components/Search/FilterComponents/DateFilterBase.tsx:218-223:

<ScrollView ...>
    <DatePresetFilterBase ... forceVerticalCalendars />
    {shouldShowRangeSummary && (
        <Text ...>{`${translate('common.range')}: `}...</Text>  // ← inside ScrollView
    )}
</ScrollView>

Exposed filter — Range text outside ScrollView at src/components/Search/FilterDropdowns/DateSelectPopup/index.tsx:219-224:

<ScrollView ...>
    <DatePresetFilterBase ... />
</ScrollView>
{!!displayedRangeText && (
    <Text ...>{`${translate('common.range')}: `}...</Text>  // ← outside ScrollView, always visible
)}

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

Move the Range text in DateFilterBase.tsx outside the ScrollView, placing it between the closing </ScrollView> and the action buttons — matching the pattern already used by DateSelectPopup. This ensures the Range text is always visible as a fixed bottom element without needing auto-scroll logic.

What alternative solutions did you explore?

Adding a scrollToEnd call (via useLayoutEffect + scrollViewRef) when shouldShowRangeSummary becomes true. Rejected because it would scroll past the calendars, making them harder to interact with while selecting dates.

---

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.

[btkcodedev]

Duplicate issue #87019