[Due for payment 2025-12-17][$250] Android - Reports -Empty space created at the end of filters row when clearing "From" filter

[jponikarchuk]

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.2.46-1
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-1858/folder/13176923/41237527/999691214
Email or phone of affected tester (no customers): ibellicotest+2022@gmail.com
Issue reported by: Applause Internal Team
Device used: Motorola MotoG60 / Android 12 (Hybrid app)
App Component: Search

Action Performed:

1. Open the Expensify app.
2. Navigate to "Reports" > "Reports"
3. Scroll the exposed filters until reaching the end.
4. Tap on "From" and select any user that has a long name. (For example: User with name and surname as username)
5. Tap on "Apply"
6. Scroll the filters until reaching the end again.
7. Tap on "From" and select "Reset"
8. Note that after "From" tab is closed, an empty space is created on the right of exposed filters.

Expected Result:

No empty space should be created on the exposed filters row when resetting an applied filter.

Actual Result:

After tapping on "Reset" on the "From" filter tab, an empty space is created at the end of the exposed filters row.

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

1.mp4

View all open jobs on GitHub

Upwork Automation - Do Not Edit

• Upwork Job URL: https://www.upwork.com/jobs/~021987777041326016363
• Upwork Job ID: 1987777041326016363
• Last Price Increase: 2025-11-10
• Automatic offers:
• thelullabyy | Contributor | 109441055

Issue Owner

Current Issue Owner: @brianlee-expensify

[melvin-bot]

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

[daledah]

Proposal

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

After tapping on "Reset" on the "From" filter tab, an empty space is created at the end of the exposed filters row.

What is the root cause of that problem?

On the web, ScrollView is essentially a horizontally scrolling

, so the browser automatically “clamps” the scroll position as the content shrinks: if the content width decreases while you are near the bottom, the DOM immediately resets the scrollLeft to stay on the right edge, so there is no gap.

On Android (React Native), ScrollView uses the native HorizontalScrollView, which does not automatically adjust its contentOffset when the content shrinks.

That's why this issue only reproduces in native devices

App/src/components/Search/SearchPageHeader/SearchFiltersBar.tsx

Lines 723 to 738 in b424509

	<ScrollView
	horizontal
	keyboardShouldPersistTaps="always"
	style={[styles.flexRow, styles.overflowScroll, styles.flexGrow0]}
	contentContainerStyle={[styles.flexRow, styles.flexGrow0, styles.gap2, styles.ph5]}
	ref={scrollRef}
	showsHorizontalScrollIndicator={false}
	>
	{filters.map((filter) => (
	<DropdownButton
	key={filter.label}
	label={filter.label}
	value={filter.value}
	PopoverComponent={filter.PopoverComponent}
	/>
	))}

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

We should fix the filter bar’s scroll behavior so it re-clamps to valid offsets whenever the content width shrinks, eliminating the empty gap after resetting a long From filter

    const scrollOffsetRef = useRef(0);
    const contentWidthRef = useRef(0);
    const containerWidthRef = useRef(0);

    const clampScrollPosition = useCallback(() => {
        const maxOffset = Math.max(contentWidthRef.current - containerWidthRef.current, 0);
        if (scrollOffsetRef.current > maxOffset) {
            scrollOffsetRef.current = maxOffset;
            scrollRef.current?.scrollTo({x: maxOffset, animated: false});
        }
    }, []);

    const handleContentSizeChange = useCallback(
        (contentWidth: number) => {
            contentWidthRef.current = contentWidth;
            clampScrollPosition();
        },
        [clampScrollPosition],
    );

    const handleLayout = useCallback(
        ({nativeEvent: {layout}}: {nativeEvent: {layout: {width: number}}}) => {
            containerWidthRef.current = layout.width;
            clampScrollPosition();
        },
        [clampScrollPosition],
    );

    const handleScroll = useCallback(({nativeEvent: {contentOffset}}: {nativeEvent: {contentOffset: {x: number}}}) => {
        scrollOffsetRef.current = contentOffset.x;
    }, []);

then pass it as props in ScrollView

    onContentSizeChange={handleContentSizeChange}
    onLayout={handleLayout}
    onScroll={handleScroll}
    scrollEventThrottle={16}

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.

[daledah]

To make it easier to test, this is test branch and the result

Screen.Recording.2025-11-07.at.23.35.04.mov

[melvin-bot]

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

[melvin-bot]

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