[HOLD for payment 2024-03-07] [$500] [MEDIUM] Categories: Long category name is displayed in one line instead of two lines

[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: 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 a long category name

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:

The long category name will be displayed in two lines (production behavior)

Actual Result:

The long category name is displayed in one line instead of two lines

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

View all open jobs on GitHub

Upwork Automation - Do Not Edit

• Upwork Job URL: https://www.upwork.com/jobs/~0192de10778824e989
• Upwork Job ID: 1762483105990975488
• Last Price Increase: 2024-02-27
• Automatic offers:
• fedirjh | Reviewer | 0
• neonbhai | Contributor | 0

[melvin-bot]

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

[melvin-bot]

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

[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 @Gonals (Engineering), see https://stackoverflowteams.com/c/expensify/questions/9980/ for more details.

[lanitochka17]

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

[FitseTLT]

Proposal

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

• Long category name is displayed in one line instead of two lines

What is the root cause of that problem?

Caused by #35567 We are missing (removed it in the pr) isRowMultilineSupported here

App/src/components/CategoryPicker/index.js

Lines 67 to 69 in cfa0ae3

	textInputValue={searchValue}
	textInputLabel={shouldShowTextInput && translate('common.search')}
	onChangeText={setSearchValue}

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

We should pass isRowMultilineSupported as true in category picker

What alternative solutions did you explore? (Optional)

[eucool]

Proposal

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

Long category name is displayed in one line instead of two lines

What is the root cause of that problem?

We miss isRowMultilineSupported in here:

App/src/components/CategoryPicker/index.js

Lines 64 to 73 in cfa0ae3

	<SelectionList
	sections={sections}
	headerMessage={headerMessage}
	textInputValue={searchValue}
	textInputLabel={shouldShowTextInput && translate('common.search')}
	onChangeText={setSearchValue}
	onSelectRow={onSubmit}
	ListItem={RadioListItem}
	initiallyFocusedOptionKey={selectedOptionKey}
	/>

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

Pass isRowMultilineSupported

What alternative solutions did you explore? (Optional)

N/A

[neonbhai]

Proposal

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

Long category name is displayed in one line instead of two lines

What is the root cause of that problem?

We now show category with RadioListItem which render text with TextWithTooltips which renders with the default number of lines as 1

App/src/components/TextWithTooltip/index.tsx

Line 20 in cfa0ae3

numberOfLines={1}

We are missing the multiline row prop in SelectionList (we had this in OptionsList)

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

We should define an new optional prop for selectionlist called isRowMultilineSupported (like we had in OptionsList)

We will need the same prop in baseListItem which allows multiple lines in TextWithTooltip

[eucool]

Caused by #35567 We are missing isRowMultilineSupported here

@FitseTLT If so then i guess the original PR author needs to address this one 🤔

c.c. @fedirjh

[FitseTLT]

Caused by #35567 We are missing isRowMultilineSupported here

@FitseTLT If so then i guess the original PR author needs to address this one 🤔

c.c. @fedirjh

So why was it Help Wanted we know all the blockers are caused by recent pr @codinggeek2023

[fedirjh]

I think @neonbhai has the correct proposal.

---

@FitseTLT and @codinggeek2023, passing isRowMultilineSupported will not fix this bug , SelectionList does not have isRowMultilineSupported prop.

[melvin-bot]

📣 @fedirjh 🎉 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]

📣 @neonbhai 🎉 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 📖

[melvin-bot]

Reviewing label has been removed, please complete the "BugZero Checklist".

[melvin-bot]

The solution for this issue has been 🚀 deployed to production 🚀 in version 1.4.45-6 and is now subject to a 7-day regression period 📆. Here is the list of pull requests that resolve this issue:

• [Categories] Add support for long category names #37389

If no regressions arise, payment will be issued on 2024-03-07. 🎊

For reference, here are some details about the assignees on this issue:

• @fedirjh requires payment automatic offer (Reviewer)
• @neonbhai requires payment automatic offer (Contributor)

[puneetlath]

All paid. Thanks y'all!