[$250] Search filters - Scrolling behavior after selecting currency and category is different

[izarutskaya]

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.0.18-1
Reproducible in staging?: Y
Reproducible in production?: N
Found when executing PR : #46566
Email or phone of affected tester (no customers): applausetester+kh050806@applause.expensifail.com
Logs: https://stackoverflow.com/c/expensify/questions/4856
Issue reported by: Applause-Internal team

Action Performed:

1. Launch New Expensify app.
2. Navigate to https://staging.new.expensify.com/search/filters
   via deep link.
3. Tap Currency.
4. Scroll down and select a currency.
5. Note that the list does not scroll up after selecting a currency.
6. Tap Category.
7. Scroll down and select a category.
8. Note that the list scrolls up after selecting a category.
9. Repeat the steps above on web.

Expected Result:

The scrolling behavior in filters should be the same after selecting currency and category.

Actual Result:

On Android and iOS,
In Step 5, the list does not scroll up after selecting a currency.
In Step 8, the list scrolls up after selecting a category.

On web, mweb and desktop app,
In Step 5, the list scrolls up without animation after selecting a currency.
In Step 8, the list scrolls up with animation after selecting a category.

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

Bug6565464_1723112060019.web.mp4

Bug6565464_1723112060032.iOS.mp4

View all open jobs on GitHub

Upwork Automation - Do Not Edit

• Upwork Job URL: https://www.upwork.com/jobs/~01f10b9412daa7bb88
• Upwork Job ID: 1821575106946228601
• Last Price Increase: 2024-08-08
• Automatic offers:
• dukenv0307 | Reviewer | 103492530
• dominictb | Contributor | 103492533

Issue Owner

Current Issue Owner: @dukenv0307

[melvin-bot]

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

[melvin-bot]

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

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

[izarutskaya]

We think this issue might be related to the #collect project.

[melvin-bot]

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

[melvin-bot]

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

[dominictb]

Edited by proposal-police: This proposal was edited at 2024-08-08 16:58:59 UTC.

Proposal

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

On Android and iOS,
In Step 5, the list does not scroll up after selecting a currency.
In Step 8, the list scrolls up after selecting a category.

On web, mweb and desktop app,
In Step 5, the list scrolls up without animation after selecting a currency.
In Step 8, the list scrolls up with animation after selecting a category.

What is the root cause of that problem?

We only do the scroll-with-animation after an option is selected, if the selection list has more than 1 section

App/src/components/SelectionList/BaseSelectionList.tsx

Line 303 in 86efffb

scrollToIndex(Math.max(selectedOptionsCount - 1, 0), true);

, the reason being that for single section selection list, usually we don't sort the selected items on top because there are not that many items. So as category is a multi-section selection list, it will has scroll-with-animation, while currency list is a single-section list so it won't have.

However, the currency list in the search filter is different from other single-section list, we actually do sort the selected items on top

App/src/components/CurrencySelectionList/index.tsx

Line 34 in 86efffb

if (currencyA.isSelected === currencyB.isSelected) {

, so it's necessary to have scroll-with-animation like other multi-section list which also sorts selected items on top.

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

We need to make sure the currency list which has canSelectMultiple as true, have 2 sections (selected section and remaining section), like any other multi selection list here https://github.com/Expensify/App/blob/main/src/pages/Search/SearchFiltersCategoryPage.tsx#L74-L83

So we can update this block to

let sections = [];

if (canSelectMultiple) {
    sections.push({
        title: undefined,
        data: filteredCurrencies.filter(currency => currency.isSelected),
    });
    sections.push({
        title: undefined,
        data: filteredCurrencies.filter(currency => !currency.isSelected),
    });
} else {
    sections = [{
        data: filteredCurrencies,
    }];
}

return {
    sections: isEmpty
        ? []
        : sections,

We can apply other sorting criteria to filteredCurrencies, before generating the sections, if necessary

What alternative solutions did you explore? (Optional)

[dominictb]

Proposal updated to add an enhancement

[dukenv0307]

@dominictb What about On web, mweb and desktop app issue? I see you just fix the problem on Android and iOS

[dukenv0307]

On web, why the list scrolls up without animation after selecting a currency

[dominictb]

@dukenv0307 Thanks for the feedback. I've updated the proposal, let me know if anything is still unclear.

It works now for all platforms.

[dukenv0307]

Thank you. Let's go with @dominictb's proposal, it looks good and tests well.

🎀👀🎀 C+ reviewed

[melvin-bot]

Current assignee @carlosmiceli is eligible for the choreEngineerContributorManagement assigner, not assigning anyone new.

[melvin-bot]

📣 @dukenv0307 🎉 An offer has been automatically sent to your Upwork account for the Reviewer role 🎉 Thanks for contributing to the Expensify app!

Offer link
Upwork job

[melvin-bot]

📣 @dominictb 🎉 An offer has been automatically sent to your Upwork account for the Contributor role 🎉 Thanks for contributing to the Expensify app!

Offer link
Upwork job
Please accept the offer and leave a comment on the Github issue letting us know when we can expect a PR to be ready for review 🧑‍💻
Keep in mind: Code of Conduct | Contributing 📖

[RachCHopkins]

Has the automation failed again @carlosmiceli? Is this done and ready to be paid?

[carlosmiceli]

Yeah, looks like it... PR is already in prod, so yeah, this should be done.

[RachCHopkins]

Payment Summary:

• Contributor: @dominictb paid $250 via Upwork
• Contributor+: @dukenv0307 paid $250 via Upwork

Upwork job here

[RachCHopkins]

Contributors have been paid, the contracts have been completed, and the Upwork post has been closed.