[HOLD for payment 2024-09-23] [Search v2.3] - List scrolls back to the top after selecting saved search at the bottom of list

[IuliiaHerets]

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.35-0
Reproducible in staging?: Y
Reproducible in production?: N/A - new feature, doesn't exist in prod
Email or phone of affected tester (no customers): applausetester+kh010901@applause.expensifail.com
Issue reported by: Applause Internal Team

Action Performed:

Precondition:

• There is a long list of saved search until the saved search list is scrollable.

1. Go to staging.new.expensify.com
2. Go to Search.
3. Scroll the saved search list to the bottom.
4. Note that the Saved title is also scrolled and hidden.
5. Select a search from the bottom of the list.
6. Note that the list scrolls up and the selected search is hidden.

Expected Result:

In Step 4, the Saved title should remain on top when the list is scrolled down.
In Step 6, the list will not scroll up after selecting the search at the bottom of the list, or the selected search will move to the top.

Actual Result:

In Step 4, the Saved title is also scrolled and hidden.
In Step 6, the list scrolls up and the selected search is hidden.

Workaround:

Unknown

Platforms:

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

Screenshots/Videos

Bug6603231_1726300553520.20240914_155008.mp4

View all open jobs on GitHub

Issue Owner

Current Issue Owner: @anmurali

[melvin-bot]

Triggered auto assignment to @Beamanator (DeployBlockerCash), see https://stackoverflowteams.com/c/expensify/questions/9980/ for more details.

[melvin-bot]

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

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

[dominictb]

Proposal

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

• Issue 1. The list scrolls up and the selected search is hidden.
• Issue 2. The Saved title is also scrolled.

What is the root cause of that problem?

1. The list scrolls up and the selected search is hidden

• Once we select any saved search option, the saved search options list is re-rendered, so it always scrolls to top:
  

  App/src/pages/Search/SearchTypeMenu.tsx

  Line 228 in 0c618ac

  <ScrollView>{renderSavedSearchesSection(savedSearchesMenuItems())}</ScrollView>

2. The Saved title is also scrolled

• The "Saved" title is displayed inside the ScrollView, so it is also scrolled along with the saved search option.

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

1. The list scrolls up and the selected search is hidden

• We need to preserve the scroll position after choosing any saved search option.

• To do it, in here, add:

    const route = useRoute();
    const scrollViewRef = useRef<RNScrollView>(null);
    const {saveScrollOffset, getScrollOffset} = useContext(ScrollOffsetContext);
    const onScroll = useCallback<NonNullable<ScrollViewProps['onScroll']>>(
        (e) => {
            // If the layout measurement is 0, it means the flashlist is not displayed but the onScroll may be triggered with offset value 0.
            // We should ignore this case.
            if (e.nativeEvent.layoutMeasurement.height === 0) {
                return;
            }
            saveScrollOffset(route, e.nativeEvent.contentOffset.y);
        },
        [route, saveScrollOffset],
    );
    useLayoutEffect(() => {
        const scrollOffset = getScrollOffset(route);
        if (!scrollOffset || !scrollViewRef.current) {
            return;
        }
        scrollViewRef.current.scrollTo({y: scrollOffset, animated: false});
    }, [getScrollOffset, route]);

• Then update:
  

  App/src/pages/Search/SearchTypeMenu.tsx

  Line 228 in 0c618ac

  <ScrollView>{renderSavedSearchesSection(savedSearchesMenuItems())}</ScrollView>

  
  to:

                    <ScrollView
                        onScroll={onScroll}
                        ref={scrollViewRef}
                    >

2. The Saved title is also scrolled

• We need to move the below title:
  

  App/src/pages/Search/SearchTypeMenu.tsx

  Line 167 in 0c618ac

  <Text style={[styles.sectionTitle, styles.pb1]}>{translate('search.savedSearchesMenuItemTitle')}</Text>

  
  to outside the scroll view.

• To do it, remove:
  

  App/src/pages/Search/SearchTypeMenu.tsx

  Line 167 in 0c618ac

  <Text style={[styles.sectionTitle, styles.pb1]}>{translate('search.savedSearchesMenuItemTitle')}</Text>

and add it to:

App/src/pages/Search/SearchTypeMenu.tsx

Line 227 in 0c618ac

<>

The detail style can be add later.

What alternative solutions did you explore? (Optional)

[luacmartins]

@lakchote will address this as a follow up to his PR

[luacmartins]

@dominictb are you available to work on a fix?

[dominictb]

@luacmartins Yes. I can work on it

[luacmartins]

@dominictb how's the PR coming along?

[dominictb]

@luacmartins I drafted the PR. I am testing a few test cases.

[garrettmknight]

• $250 approved for @rushatgabhane via New Dot
• $250 approved for @dominictb via Upwork (still waiting on profile from @dominictb)

[anmurali]

Waiting on @dominictb

[melvin-bot]

@anmurali, @lakchote, @luacmartins, @rushatgabhane, @dominictb Huh... This is 4 days overdue. Who can take care of this?

[luacmartins]

Waiting on payment

[melvin-bot]

@anmurali, @lakchote, @luacmartins, @rushatgabhane, @dominictb Still overdue 6 days?! Let's take care of this!

[lakchote]

@dominictb could you please give us your Upwork profile in order to pay you?

[melvin-bot]

@anmurali, @lakchote, @luacmartins, @rushatgabhane, @dominictb 8 days overdue is a lot. Should this be a Weekly issue? If so, feel free to change it!

[lakchote]

bump @dominictb for your Upwork profile.

[dominictb]

@lakchote Sorry I missed this, mine is https://www.upwork.com/freelancers/~01f70bed1934fd35d5

[melvin-bot]

@anmurali, @lakchote, @luacmartins, @rushatgabhane, @dominictb 12 days overdue. Walking. Toward. The. Light...

[anmurali]

@dominictb - offer is here

[dominictb]

Accepted, thank you @anmurali

[lakchote]

Not overdue. Should we close this?

[luacmartins]

Seems like we're all set. Gonna close the issue, please reopen if needed.

[melvin-bot]

@anmurali @lakchote @luacmartins Be sure to fill out the Contact List!

[dominictb]

@luacmartins @lakchote My contract was not paid by @anmurali yet, please help to reopen

[luacmartins]

Sorry, I thought that had been handled based on this comment. My bad 😅

[luacmartins]

Bump for payment @anmurali

[lakchote]

friendly bump @anmurali ^

[anmurali]

Paid. Sorry, I thought I already did that as well.