[PAID] [HOLD for payment 2024-11-29] [$250] mWeb -Finder -User not scrolled to top of chats list when scrolling down and deleting search

[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.0.47-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://expensify.testrail.io/index.php?/tests/view/5068088&group_by=cases:section_id&group_order=asc&group_id=229066
Email or phone of affected tester (no customers): N/A
Issue reported by: Applause - Internal Team

Action Performed:

1. Open the staging.new.expensify.com website
2. Log in to an account with a large list of chats
3. Tap on the search icon on the top right corner
4. Write a few letters to trigger some results
5. Scroll down to the middle of the results
6. Select all the content in the search input and delete it
7. Verify the chats list is updated and the user is navigated to the top of it

Expected Result:

After deleting the content in search input, the chats list should be updated and the user should be navigated to the top of it

Actual Result:

When writing a few letters to trigger a search, scrolling down to the middle of the results, selecting all the content on search input and deleting it, the chats list updated but the user is not redirected to the top. The list stays in the middle

Workaround:

Unknown

Platforms:

Which of our officially supported platforms is this issue occurring on?

• Android: Native
• Android: mWeb Chrome
• iOS: Native
• iOS: mWeb Safari
• MacOS: Chrome / Safari
• MacOS: Desktop

Screenshots/Videos

Add any screenshot/video evidence

Bug6630312_1728534947618.Finder.mp4

View all open jobs on GitHub

Upwork Automation - Do Not Edit

• Upwork Job URL: https://www.upwork.com/jobs/~021846215092993792827
• Upwork Job ID: 1846215092993792827
• Last Price Increase: 2024-11-12
• Automatic offers:
• allgandalf | Reviewer | 104904927
• wildan-m | Contributor | 104904928

Issue Owner

Current Issue Owner: @CortneyOfstad

[melvin-bot]

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

[lanitochka17]

@CortneyOfstad FYI I haven't added the External label as I wasn't 100% sure about this issue. Please take a look and add the label if you agree it's a bug and can be handled by external contributors

[daledah]

Edited by proposal-police: This proposal was edited at 2024-10-30 14:39:15 UTC.

Proposal

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

When writing a few letters to trigger a search, scrolling down to the middle of the results, selecting all the content on search input and deleting it, the chats list updated but the user is not redirected to the top. The list stays in the middle

What is the root cause of that problem?

When the newUserQuery becomes empty, we have the logic to scroll to -1

App/src/components/Search/SearchRouter/SearchRouter.tsx

Line 308 in de42f2e

listRef.current?.updateAndScrollToFocusedIndex(-1);

But we prevent to scroll if the index is -1

App/src/components/SelectionList/BaseSelectionList.tsx

Lines 254 to 256 in de42f2e

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

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

We want to prevent scrolling if index is -1 because at the beginning the search term is always -1 then we don't want to do any scroll (If not the list can be blink)

1. We should remove these redundant code here since we already handle it in BaseSelectionList

2. Add textInputValue that is missed here

3. Update scrollToIndex function to add new param isFirstRender

 const scrollToIndex = useCallback(
        (index: number, animated = true, isFirstRender = false) => {
            const item = flattenedSections.allOptions.at(index);

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

            const itemIndex = index === -1 ? 0 : item.index ?? -1;
            const sectionIndex = index === -1 ? 0 : item.sectionIndex ?? -1;

            listRef.current.scrollToLocation({sectionIndex, itemIndex, animated, viewOffset: variables.contentHeaderHeight});
        },

        // eslint-disable-next-line react-compiler/react-compiler, react-hooks/exhaustive-deps
        [flattenedSections.allOptions],
    );

Then update

App/src/components/SelectionList/BaseSelectionList.tsx

Line 507 in 4c90d62

scrollToIndex(focusedIndex, false);

to

scrollToIndex(focusedIndex, false, true);

What alternative solutions did you explore? (Optional)

We can update this logic to

listRef.current?.updateAndScrollToFocusedIndex(0);

so the first item will be focused after deleting search text

[CortneyOfstad]

Didn't realize this was Android — so having Stevie do some testing for me!

[CortneyOfstad]

Confirmed that this was reproducible so getting eyes on it! S/O to @slafortune for her help!

[melvin-bot]

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

[melvin-bot]

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