[$250] Reports - Not seen the newly expense briefly highlighted if reports tab having many expenses

[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: v9.2.19-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: https://test-management.browserstack.com/projects/2219752/test-runs/TR-963/folder/13176922/41237518/920383704
Email or phone of affected tester (no customers): N/A
Issue reported by: Applause Internal Team
Device used: Win 11/Chrome
App Component: Search

Action Performed:

1. Open https://staging.new.expensify.com login with account having 50+ expenses
2. Go to Reports tab
3. Make sure Filter is Expenses type and not filter anything for a new expense will display in view
4. Scroll down to the end of list
5. Click on FAB button
6. Create a manual expense to any workspace

Expected Result:

The newly added expense appears in the table and the row is briefly highlighted to draw attention to it.

Actual Result:

After created new expense, app remains at the end of list, not scroll to the newly added expense for user seeing the briefly highlighted to draw attention to it

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

11.mp4

View all open jobs on GitHub

Upwork Automation - Do Not Edit

• Upwork Job URL: https://www.upwork.com/jobs/~021972949143650517328
• Upwork Job ID: 1972949143650517328
• Last Price Increase: 2025-11-04

[melvin-bot]

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

[mukhrr]

🚨 Edited by proposal-police: This proposal was edited at 2025-10-17 09:34:43 UTC.

Proposal

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

When a user creates a new expense while scrolled to the bottom of the expenses list, the newly created expense appears in the list but the user cannot see it highlighted because the app doesn't scroll to the new item.

What is the root cause of that problem?

1. The onLayout prop in FlashList is triggered only when container's dimensions change, not when new items are added to the list.

App/src/components/Search/index.tsx

Line 782 in 3a10c20

const onLayout = useCallback(() => handleSelectionListScroll(sortedSelectedData, searchListRef.current), [handleSelectionListScroll, sortedSelectedData]);

App/src/components/Search/index.tsx

Line 897 in 3a10c20

onLayout={onLayout}

And when new item is added, on second render of useEffect in useSearchHighlightAndScroll, hasNewItemsRef.current is set to false as we are comparing currect transactions to previos ones which prevents scroll and highlight to perform.

App/src/hooks/useSearchHighlightAndScroll.ts

Line 129 in 9284d17

hasNewItemsRef.current = isChat ? reportActionsIDs.length > previousReportActionsIDs.length : transactionsIDs.length > previousTransactionsIDs.length;

2. Besides, the searchListRef was being managed separately from the scroll handler, creating a disconnect between when the ref was available and when the scroll logic needed to execute in Search/index.ts

Issue is coming from #61547

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

1. We need to replace onLayout call with effect logic. (Using useLayoutEffect to prevent any flickering and providing more smooth scroll as it runs synchronously after DOM mutations but before the browser paints. I think we may face race condition with useEffect as DOM might not be fully ready when scroll executes)

    useLayoutEffect(() => {
        handleSelectionListScroll(sortedSelectedData, searchListRef.current);
    }, [newSearchResultKey]);

And we need to make sure hasNewItemsRef.current change when hasTransactionsIDsChange:

          if ((!isChat && hasTransactionsIDsChange) || (isChat && hasReportActionsIDsChange)) { 
                          hasNewItemsRef.current = isChat ? reportActionsIDs.length > previousReportActionsIDs.length : transactionsIDs.length > previousTransactionsIDs.length; 
            } 

And also we need to make sure to include reports with future dates, as their index will be 0 (at the top most)

App/src/hooks/useSearchHighlightAndScroll.ts

Lines 257 to 260 in bceff96

	// Early return if the new item is not found in the data array
	if (indexOfNewItem <= 0) {
	return;
	}

So we need to prevent scrolling only if index is less than 0

            if (indexOfNewItem < 0) {
                return;
            }

2. Besides, we need to fix scrollToIndex function to take viewOffset params so that we can customize it. In expense search list, variables.contentHeaderHeight makes it scroll to wrong item.

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

Lines 256 to 273 in 3a10c20

	/**
	* Scrolls to the desired item index in the section list
	*
	* @param index - the index of the item to scroll to
	* @param animated - whether to animate the scroll
	*/
	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});
	},
	[data],
	);

REC-20250928223348.mp4

    /**
     * Scrolls to the desired item index in the section list
     *
     * @param index - the index of the item to scroll to
     * @param animated - whether to animate the scroll
     * @param viewOffset - the offset to apply to the scroll
     */
    const scrollToIndex = useCallback(
        (index: number, animated = true, viewOffset = variables.contentHeaderHeight) => {
            const item = data.at(index);

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

            listRef.current.scrollToIndex({index, animated, viewOffset});
        },
        [data],
    );

And in useSearchHighlightAndScroll:

ref.scrollToIndex(indexOfNewItem, true, 0);

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

N/A

What alternative solutions did you explore? (Optional)

If we want to keep current logic, we can add key to SearchList so that it will re-render on data change:

    <SearchList
     key={newSearchResultKey ?? 'default'}
     ...
     // onLayout will NOT be removed

[bernhardoj]

Proposal

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

List doesn't scroll to the new expense item added.

What is the root cause of that problem?

We have the logic to scroll to the newest item

App/src/hooks/useSearchHighlightAndScroll.ts

Lines 224 to 267 in 174e69f

	const handleSelectionListScroll = useCallback(
	(data: SearchListItem[], ref: SelectionListHandle | null) => {
	// Early return if there's no ref, new transaction wasn't brought in by this hook
	// or there's no new search result key
	if (!ref || !triggeredByHookRef.current || newSearchResultKey === null) {
	return;
	}
	// Extract the transaction/report action ID from the newSearchResultKey
	const newID = newSearchResultKey.replace(isChat ? ONYXKEYS.COLLECTION.REPORT_ACTIONS : ONYXKEYS.COLLECTION.TRANSACTION, '');
	// Find the index of the new transaction/report action in the data array
	const indexOfNewItem = data.findIndex((item) => {
	if (isChat) {
	if ('reportActionID' in item && item.reportActionID === newID) {
	return true;
	}
	} else {
	// Handle TransactionListItemType
	if ('transactionID' in item && item.transactionID === newID) {
	return true;
	}
	// Handle TransactionGroupListItemType with transactions array
	if ('transactions' in item && Array.isArray(item.transactions)) {
	return item.transactions.some((transaction) => transaction?.transactionID === newID);
	}
	}
	return false;
	});
	// Early return if the new item is not found in the data array
	if (indexOfNewItem <= 0) {
	return;
	}
	// Perform the scrolling action
	ref.scrollToIndex(indexOfNewItem);
	// Reset the trigger flag to prevent unintended future scrolls and highlights
	triggeredByHookRef.current = false;
	},
	[newSearchResultKey, isChat],
	);

and we call it in onLayout.

App/src/components/Search/index.tsx

Line 782 in 174e69f

const onLayout = useCallback(() => handleSelectionListScroll(sortedSelectedData, searchListRef.current), [handleSelectionListScroll, sortedSelectedData]);

However, onLayout is only called on mount or when the layout changes. When a new item is added, the list layout stays the same. It's the list content size that changes.

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

We need to call the scroll when the content size changes.

onContentSizeChange={() => handleSelectionListScroll(sortedSelectedData, searchListRef.current)}

Pass down the onContentSizeChange from Search -> SearchList -> BaseSearchList -> AnimatedFlashListComponent.

Also, we need to remove the viewOffset because it makes the item not fully shown.

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

Line 270 in 174e69f

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

(or we can make it negative)

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

N/A

[melvin-bot]

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

[melvin-bot]

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