[Due for payment 2025-11-26] [$250] Web - Search - glitchy scrolling with down arrow

[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.2.37-1
Reproducible in staging?: Y
Reproducible in production?: Y
If this was caught during regression testing, add the test name, ID and link from TestRail: https://test-management.browserstack.com/projects/2219752/test-runs/TR-1438/folder/13176922/41237522/969659299
Issue reported by: Applause - Internal Team

Action Performed:

Precondition: Login with account having 50+ expenses

1. Open https://staging.new.expensify.com/
2. Navigate to Reports tab
3. At search box, type "type:expense" and enter
4. Use down arrow key of keyboard moving to result list
5. Use down arrow key moving to next row

Expected Result:

The selected row by using down arrow key of keyboard should be on screen for user seen

Actual Result:

The selected row by using down arrow key of keyboard scroll up and user doesn't see it

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
• MacOS: Desktop

Platforms Tested:

On which of our officially supported platforms was this issue tested:

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

Screenshots/Videos

Add any screenshot/video evidence

Bug6982570_1761239432876.Recording__1383.mp4

View all open jobs on GitHub

Upwork Automation - Do Not Edit

• Upwork Job URL: https://www.upwork.com/jobs/~021984269391665270810
• Upwork Job ID: 1984269391665270810
• Last Price Increase: 2025-10-31

Issue Owner

Current Issue Owner: @NicMendonca

[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.

[thelullabyy]

Proposal

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

The selected row by using down arrow key of keyboard scroll up and user doesn't see it

What is the root cause of that problem?

In the scrollToIndex function of the SearchList component , viewOffset: variables.contentHeaderHeight is used to create a distance from the top of the list to the focused item.

App/src/components/Search/SearchList/index.tsx

Lines 267 to 275 in 9e97155

	const scrollToIndex = useCallback(
	(index: number, animated = true) => {
	const item = data.at(index);
	if (!listRef.current || !item || index === -1) {
	return;
	}
	listRef.current.scrollToIndex({index, animated, viewOffset: variables.contentHeaderHeight});

The viewOffset only sets the distance from the top of the list and does not guarantee that the focused item will be fully displayed on the screen. When scrolling down, the focused item may be blocked by the header or completely scrolled past.

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

Add viewPosition to ensure the focused item is always within the viewport viewPosition: 0.3. This will keep the focused item at approximately 30% from the top of the screen. We can adjust this parameter as needed.

App/src/components/Search/SearchList/index.tsx

Line 275 in 9e97155

listRef.current.scrollToIndex({index, animated, viewOffset: variables.contentHeaderHeight});

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)

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.

[abbasifaizan70]

Fix: Keyboard Navigation Causes Selected Row to Scroll Off-Screen in Search Results

Problem Statement

When navigating through search results using keyboard arrow keys (specifically the down arrow key), the selected row scrolls up and becomes invisible to the user. This makes keyboard navigation unusable as users cannot see which item they have selected.

Root Cause

The issue is in the scrollToIndex function in src/components/Search/SearchList/index.tsx (line 275). The function was incorrectly using a viewOffset parameter when calling FlashList's scrollToIndex method:

listRef.current.scrollToIndex({index, animated, viewOffset: variables.contentHeaderHeight});

The viewOffset value (contentHeaderHeight = 72-100 pixels depending on pixel ratio) was intended to offset the scroll position to account for the header, but it was actually causing the FlashList to scroll the focused item too far up, pushing it above the visible viewport and off-screen.

This is different from other list implementations in the codebase (like BaseSelectionList) which don't use a viewOffset parameter and rely on FlashList's default scrolling behavior to keep items properly positioned within the viewport.

---

Solution

Remove the incorrect viewOffset parameter from the scrollToIndex call and let FlashList use its default scrolling behavior:

listRef.current.scrollToIndex({index, animated});

Changes Made

File: src/components/Search/SearchList/index.tsx

1. Remove viewOffset from scrollToIndex call:

  const scrollToIndex = useCallback(
      (index: number, animated = true) => {
          const item = data.at(index);

          if (!listRef.current || !item || index === -1) {
              return;
          }

-         listRef.current.scrollToIndex({index, animated, viewOffset: variables.contentHeaderHeight});
+         listRef.current.scrollToIndex({index, animated});
      },
      [data],
  );

2. Remove unused variables import:

  import navigationRef from '@libs/Navigation/navigationRef';
- import variables from '@styles/variables';
  import type {TransactionPreviewData} from '@userActions/Search';

This aligns the Search list's scrolling behavior with the standard BaseSelectionList component, which successfully keeps focused items visible during keyboard navigation.

---

Alternative Solutions Explored

1. Adjusting the viewOffset value

Instead of removing viewOffset entirely, we could have tried calculating a different offset value. However, this approach is fragile and would require maintaining custom logic that FlashList already handles correctly by default.

2. Using viewPosition parameter

FlashList also supports a viewPosition parameter (0 = top, 0.5 = middle, 1 = bottom) which could be used to control where the item appears in the viewport. However, removing viewOffset and using the default behavior is simpler and more maintainable.

3. Custom scrolling logic

We could have implemented custom scrolling with scrollToOffset and calculated the exact pixel position. This would be unnecessarily complex when the default behavior works correctly.

Conclusion: The chosen solution is the simplest and most maintainable - it follows the pattern already established in BaseSelectionList and leverages FlashList's built-in logic for keeping items visible.

[dmkt9]

Proposal

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

The selected row by using down arrow key of keyboard scroll up and user doesn't see it

What is the root cause of that problem?

Since we’ve switched to using FlashList for BaseSearchList:

App/src/components/Search/SearchList/BaseSearchList/index.tsx

Line 13 in 302280e

const AnimatedFlashListComponent = Animated.createAnimatedComponent(FlashList<SearchListItem>);

And because FlashList handles viewOffset differently from FlatList, we didn’t update the viewOffset logic accordingly during the transition.

App/src/components/Search/SearchList/index.tsx

Line 279 in 302280e

listRef.current.scrollToIndex({index, animated, viewOffset: variables.contentHeaderHeight});

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

Invert the sign of viewOffset:

- listRef.current.scrollToIndex({index, animated, viewOffset: variables.contentHeaderHeight});
+ listRef.current.scrollToIndex({index, animated, viewOffset: -variables.contentHeaderHeight});

App/src/components/Search/SearchList/index.tsx

Line 279 in 302280e

listRef.current.scrollToIndex({index, animated, viewOffset: variables.contentHeaderHeight});

NOTE: Review all other cases where FlashList is used.

What alternative solutions did you explore? (Optional)

N/A

[melvin-bot]

@NicMendonca Eep! 4 days overdue now. Issues have feelings too...

[melvin-bot]

@NicMendonca 6 days overdue. This is scarier than being forced to listen to Vogon poetry!

[melvin-bot]

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