[$500][MEDIUM] Categories: Search field is present in category list when there are fewer than 8 categories to choose from

[lanitochka17]

If you haven’t already, check out our contributing guidelines for onboarding and email [email protected] to request to join our Slack channel!

---

Version Number: 1.4.44-0
Reproducible in staging?: Y
Reproducible in production?: N
If this was caught during regression testing, add the test name, ID and link from TestRail:
Email or phone of affected tester (no customers):
Logs: https://stackoverflow.com/c/expensify/questions/4856
Expensify/Expensify Issue URL:
Issue reported by: Applause - Internal Team
Slack conversation:

Action Performed:

Precondition:

• User is an employee of Collect workspace
• The Collect workspace has less than 8 categories

1. Go to staging.new.expensify.com
2. Go to workspace chat
3. Open request money page
4. Create manual request and proceed to confirmation page
5. Click Show more > Category

Expected Result:

There will be no search field because there are less than 8 categories

Actual Result:

Search field is present when there are less than 8 categories

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

Bug6394369_1709055952133.20240227-141548-1_kEAvasRf.mp4

View all open jobs on GitHub

Upwork Automation - Do Not Edit

• Upwork Job URL: https://www.upwork.com/jobs/~0110ba1eec3b905bcd
• Upwork Job ID: 1762535661381767168
• Last Price Increase: 2024-02-27

[melvin-bot]

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

[melvin-bot]

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

[melvin-bot]

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

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

[lanitochka17]

We think that this bug might be related to #wave6
CC @greg-schroeder

[neonbhai]

Proposal

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

Search field is present in Category list when there is less than 8 categories

What is the root cause of that problem?

We don't pass shouldShowTextInput to the selection list in CategoryPicker. We are actually missing the prop in BaseSelectionList

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

We should add the shouldShowTextInput prop to SelectionList.
Also update this variable to factor in the prop

App/src/components/SelectionList/BaseSelectionList.tsx

Line 74 in 69110ce

const shouldShowTextInput = !!textInputLabel;

Then pass this variable to SelectionList:

App/src/components/CategoryPicker/index.js

Line 53 in 7942cb8

const showInput = !isCategoriesCountBelowThreshold;

Then pass this prop:

shouldShowTextInput={showInput}

[dukenv0307]

Regression of this #35567.

[eucool]

Proposal

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

Search field is present in Category list when there is less than 8 categories

What is the root cause of that problem?

The variable name policyCategoriesCount is wrong:

App/src/components/CategoryPicker/index.js

Line 52 in 7942cb8

const isCategoriesCountBelowThreshold = policyCategoriesCount < CONST.CATEGORY_LIST_THRESHOLD;

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

Replace the above with: policiesCount

App/src/components/CategoryPicker/index.js

Line 51 in 7942cb8

const policiesCount = OptionsListUtils.getEnabledCategoriesCount(_.values(policyCategories));

What alternative solutions did you explore? (Optional)

N/A

[puneetlath]

Definitely a bug, but doesn't need to block the deploy. Removing the label.

[jasperhuangg]

Waiting for proposals

[eucool]

I already proposed a solution above, can you please have a look :)

…

On Sat, Mar 2, 2024 at 12:25 AM Jasper Huang ***@***.***> wrote: Waiting for proposals — Reply to this email directly, view it on GitHub <#37329 (comment)>, or unsubscribe <https://github.com/notifications/unsubscribe-auth/BFJXGI6YMLNWCLXOSU4UJBLYWDFLFAVCNFSM6AAAAABD4R7SFWVHI2DSMVQWIX3LMV43OSLTON2WKQ3PNVWWK3TUHMYTSNZTG42TCMJQHE> . You are receiving this because you commented.Message ID: ***@***.***>

[akinwale]

I am unable to reproduce this. Seems it has already been fixed on main.

App/src/components/CategoryPicker.tsx

Line 67 in 4231ac9

const isCategoriesCountBelowThreshold = policiesCount < CONST.CATEGORY_LIST_THRESHOLD;