[$500] Chat - Incorrect search result & Show More' Dropdown shown when one search result displayed

[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: 1.4.44-0
Reproducible in staging?: Y
Reproducible in production?: N
Email or phone of affected tester (no customers): applausetester+omq1@applause.expensifail.com
Logs: https://stackoverflow.com/c/expensify/questions/4856
Issue reported by: Applause-Internal Team

Action Performed:

Precondition: user Signed In with expensifail account

1. Tap on FAB
2. Tap on "Start Chat"
3. Search for any user e.g. "omp1"
4. Tap on "Show More" dropdown button

Expected Result:

The search result page should be properly displayed

Actual Result:

Incorrect search result counter and "Show More' Dropdown button shown when one search result displayed. When the user taps on the 'Show More' button, nothing happens.

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

Bug6393599_1709009871871.RPReplay_Final1708998854.mp4

View all open jobs on GitHub

Upwork Automation - Do Not Edit

• Upwork Job URL: https://www.upwork.com/jobs/~0113928963c9c991f9
• Upwork Job ID: 1762422673435533312
• Last Price Increase: 2024-02-27

[melvin-bot]

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

[melvin-bot]

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

[melvin-bot]

Triggered auto assignment to @puneetlath (Bug), see https://stackoverflow.com/c/expensify/questions/14418 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.

[melvin-bot]

Current assignee @puneetlath is eligible for the Engineering assigner, not assigning anyone new.

[izarutskaya]

We think that this bug might be related to #vip-vsb
CC @quinthar

[benjaminbennet]

Proposal

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

Incorrect search result & Show More' Dropdown shown when one search result displayed

What is the root cause of that problem?

Let's take a look here:

App/src/components/OptionsList/BaseOptionsList.tsx

Lines 276 to 284 in 668df99

	export default memo(
	forwardRef(BaseOptionsList),
	(prevProps, nextProps) =>
	nextProps.focusedIndex === prevProps.focusedIndex &&
	nextProps?.selectedOptions?.length === prevProps?.selectedOptions?.length &&
	nextProps.headerMessage === prevProps.headerMessage &&
	nextProps.isLoading === prevProps.isLoading &&
	isEqual(nextProps.sections, prevProps.sections),
	);

BaseOptionList only re-renders based on the above conditions. Because of that when renderFooterContent changed, BaseOptionList won't re-render. That's the root cause.

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

Add a new props called shouldShowFooter to our BaseOptionsList. We should only render the footer when shouldShowFooter is true. Also update the condition inside memo function to include shouldShowFooter props.

export default memo(
    forwardRef(BaseOptionsList),
    (prevProps, nextProps) =>
        nextProps.focusedIndex === prevProps.focusedIndex &&
        nextProps.shouldShowFooter === prevProps.shouldShowFooter &&
        nextProps?.selectedOptions?.length === prevProps?.selectedOptions?.length &&
        nextProps.headerMessage === prevProps.headerMessage &&
        nextProps.isLoading === prevProps.isLoading &&
        isEqual(nextProps.sections, prevProps.sections),
);

// BaseOptionsList component
ListFooterComponent={shouldShowFooter && renderFooterContent}

Finally update the BaseOptionsSelector component:

 shouldShowFooter={shouldShowShowMoreButton}
  renderFooterContent={() =>
               
                    <ShowMoreButton
                        containerStyle={{...themeStyles.mt2, ...themeStyles.mb5}}
                        currentCount={CONST.MAX_OPTIONS_SELECTOR_PAGE_LENGTH * paginationPage}
                        totalCount={allOptions.length}
                        onPress={incrementPage}
                    />
                
            }

What alternative solutions did you explore? (Optional)

N/A

[dukenv0307]

Proposal

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

Incorrect search result counter and "Show More' Dropdown button shown when one search result displayed. When the user taps on the 'Show More' button, nothing happens.

What is the root cause of that problem?

This is the regression of this PR #31606, we pass the wrong sections prop into BaseOptionList that makes this component not re-render when the options is changed

https://github.com/Expensify/App/pull/31606/files#diff-a9bb6f5b7c223e3c0a5f49b1a55692c74a63287a411527bbac37cabd95b2ffe2

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

we should pass sections state here instead of props.sections

sections={sections}

App/src/components/OptionsSelector/BaseOptionsSelector.js

Line 563 in 668df99

sections={props.sections}

What alternative solutions did you explore? (Optional)

NA

[sobitneupane]

I could not reproduce the issue.

@dukenv0307 @benjaminbennet Is the issue still reproducible? If yes, Can you please share the steps to reproduce the issue?

[puneetlath]

I'm also not able to reproduce. Going to close, but feel free to comment if you're able to reproduce it.

[melvin-bot]

⚠️ Looks like this issue was linked to a Deploy Blocker here

If you are the assigned CME please investigate whether the linked PR caused a regression and leave a comment with the results.

If a regression has occurred and you are the assigned CM follow the instructions here.

If this regression could have been avoided please consider also proposing a recommendation to the PR checklist so that we can avoid it in the future.