[$500] Web - Request Money - Long description is showing without "Paid by" and "Split with"

@thuyle04

If you haven’t already, check out our contributing guidelines for onboarding and email contributors@expensify.com to request to join our Slack channel!

Action Performed:

Click on FAB -> Request money -> Enter any numbers
Select some account -> Add to Split button
Enter a long description -> Save -> Split button
Click on newly Request money -> Observe this Request money

Expected Result:

Request money will display "Paid by" and "Split with" as well as the Description.

Actual Result:

Long description is showing only without "Paid by" and "Split with"

Workaround:

Unknown

Platforms:

Which of our officially supported platforms is this issue occurring on?

Version Number: 1.3.73.0
Reproducible in staging?: y
Reproducible in production?: y
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
Notes/Photos/Videos: Any additional supporting documentation

Screen.Recording.2023-09-23.at.9.31.06.PM.mov

screen-capture.1.2.webm

Recording.4723.mp4

Expensify/Expensify Issue URL:
Issue reported by: @thuyle04
Slack conversation: https://expensify.slack.com/archives/C049HHMV9SM/p1695272345551449

View all open jobs on GitHub

Upwork Automation - Do Not Edit

Upwork Job URL: https://www.upwork.com/jobs/~01062695b5b87a83cc
Upwork Job ID: 1705616890113011712
Last Price Increase: 2023-10-14

Proposal

Please re-state the issue

Split bill details page is not scrollable and is stuck when a long description is provided.

What is the root cause of this issue?

First
We are not keeping the MoneyRequestConfirmationList in a ScrollView in SplitBillDetailsPage.js

App/src/pages/iou/SplitBillDetailsPage.js

Lines 82 to 94 in 5aa7f6d

    
           {Boolean(participants.length) && ( 
        
               <MoneyRequestConfirmationList 
        
                   hasMultipleParticipants 
        
                   payeePersonalDetails={payeePersonalDetails} 
        
                   selectedParticipants={participantsExcludingPayee} 
        
                   iouAmount={splitAmount} 
        
                   iouComment={splitComment} 
        
                   iouCurrencyCode={splitCurrency} 
        
                   iouType={CONST.IOU.MONEY_REQUEST_TYPE.SPLIT} 
        
                   isReadOnly 
        
                   shouldShowFooter={false} 
        
               /> 
        
           )}

This makes it impossible to scroll and the page seems stuck.

Second
The reason that description is not getting truncated despite passing numberOfLines here:

App/src/components/MoneyRequestConfirmationList.js

Line 509 in 389d7b0

numberOfLinesTitle={2}

is because instead of a Text component, description is being rendered as HTML which we cannot truncate with the numberOfLines prop.

App/src/components/MenuItem.js

Lines 253 to 265 in 389d7b0

    
           <View style={[styles.flexRow, styles.alignItemsCenter]}> 
        
               {Boolean(props.title) && (Boolean(props.shouldRenderAsHTML) || (Boolean(props.shouldParseTitle) && Boolean(html.length))) && ( 
        
                   <MenuItemRenderHTMLTitle title={getProcessedTitle} /> 
        
               )} 
        
               {!props.shouldRenderAsHTML && !props.shouldParseTitle && Boolean(props.title) && ( 
        
                   <Text 
        
                       style={titleTextStyle} 
        
                       numberOfLines={props.numberOfLinesTitle || undefined} 
        
                       dataSet={{[CONST.SELECTION_SCRAPER_HIDDEN_ELEMENT]: props.interactive && props.disabled}} 
        
                   > 
        
                       {convertToLTR(props.title)} 
        
                   </Text> 
        
               )}

What changes do you think should be made to fix this problem?

First
We should nest the MoneyRequestConfirmationList in a double ScrollView like we do in MoneyRequestConfirmPage.js here:

App/src/pages/iou/steps/MoneyRequestConfirmPage.js

Lines 290 to 300 in 5aa7f6d

    
                               {/* 
        
                                * The MoneyRequestConfirmationList component uses a SectionList which uses a VirtualizedList internally. 
        
                                * VirtualizedList cannot be directly nested within ScrollViews of the same orientation. 
        
                                * To work around this, we wrap the MoneyRequestConfirmationList component with a horizontal ScrollView. 
        
                                */} 
        
                               <ScrollView contentContainerStyle={[styles.flexGrow1]}> 
        
                                   <ScrollView 
        
                                       horizontal 
        
                                       contentContainerStyle={[styles.flex1, styles.flexColumn]} 
        
                                   > 
        
                                       <MoneyRequestConfirmationList

We should also add the pointerEvents='box-none' to the ScrollView which is currently present on the parent View in SplitBillDetailsPage.

Second
According to this comment, In MenuItemRenderHTMLTitle/index.js, we need to limit the description to 2-3 lines unless the show more button is pressed. For that, we can change the MenuItemWithTopDescription in MoneyRequestConfirmationList like this:

<MenuItemWithTopDescription
    shouldShowRightIcon={!props.isReadOnly}
    shouldParseTitle
    title={props.iouComment}
    description={translate('common.description')}
    ...
    numberOfLinesTitle={shouldShowAllFields ? null : 3} // this line changed
/>

This will make sure that the description is limited to only 3 lines unless it is expanded.

Third
In MenuItem.js, we need to change the maxHeight to allow only the required lines unless it is expanded. Here:

App/src/components/MenuItem.js

Lines 253 to 256 in 389d7b0

    
           <View style={[styles.flexRow, styles.alignItemsCenter]}> 
        
               {Boolean(props.title) && (Boolean(props.shouldRenderAsHTML) || (Boolean(props.shouldParseTitle) && Boolean(html.length))) && ( 
        
                   <MenuItemRenderHTMLTitle title={getProcessedTitle} /> 
        
               )}

We can pass change the style like this:

const titleContainerStyle = StyleUtils.combineStyles([
        styles.flexRow,
        styles.alignItemsCenter,
        styles.overflowHidden,
        {maxHeight: props.numberOfLinesTitle ? variables.lineHeightXLarge * props.numberOfLinesTitle : undefined}
    ]);
    
    ...
<View style={titleContainerStyle}>
    {Boolean(props.title) && (Boolean(props.shouldRenderAsHTML) || (Boolean(props.shouldParseTitle) && Boolean(html.length))) && (
        <MenuItemRenderHTMLTitle title={getProcessedTitle} />
    )}
    ....

Result:

Screen.Recording.2023-10-08.at.3.10.23.PM.mov

What other alternative options did you explore? (Optional)

If we want to set a fixed limit for the number of characters instead of number of lines for the description, we can also use a custom truncate function with a fixed number of words for the description. I prefer the previous solution because that allows flexibility of using numberOfLines for menu items that are using html rendering.

@anmurali

Triggered auto assignment to @anmurali (Bug), see https://stackoverflow.com/c/expensify/questions/14418 for more details.

Job added to Upwork: https://www.upwork.com/jobs/~01062695b5b87a83cc

Bug0 Triage Checklist (Main S/O)

This "bug" occurs on a supported platform (ensure Platforms in OP are ✅)
This bug is not a duplicate report (check E/App issues and #expensify-bugs)
- If it is, comment with a link to the original report, close the issue and add any novel details to the original issue instead
This bug is reproducible using the reproduction steps in the OP. S/O
- If the reproduction steps are clear and you're unable to reproduce the bug, check with the reporter and QA first, then close the issue.
- If the reproduction steps aren't clear and you determine the correct steps, please update the OP.
This issue is filled out as thoroughly and clearly as possible
- Pay special attention to the title, results, platforms where the bug occurs, and if the bug happens on staging/production.
I have reviewed and subscribed to the linked Slack conversation to ensure Slack/Github stay in sync

@laurenreidexpensify

Triggered auto assignment to @laurenreidexpensify (External), see https://stackoverflow.com/c/expensify/questions/8582 for more details.

@situchan

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

@anmurali

@anmurali @situchan this issue is now 4 weeks old and preventing us from maintaining WAQ, can you:

Decide whether any proposals currently meet our guidelines and can be approved as-is today
If no proposals meet that standard, please take this issue internal and treat it as one of your highest priorities
If you have any questions, don't hesitate to start a discussion in #expensify-open-source

Thanks!

@situchan

Current assignee @situchan is eligible for the Internal assigner, not assigning anyone new.

Contributor details
Your Expensify account email: thuy.lethithu@antbuddy.com
Upwork Profile Link: https://www.upwork.com/freelancers/~01fcd9ed589276332f

✅ Contributor details stored successfully. Thank you for contributing to Expensify!

@anmurali

@anmurali, @situchan 6 days overdue. This is scarier than being forced to listen to Vogon poetry!

Not Overdue

@anmurali

@anmurali, @situchan Uh oh! This issue is overdue by 2 days. Don't forget to update your issues!

We can close this

Navigation Menu

Repository navigation

[$500] Web - Request Money - Long description is showing without "Paid by" and "Split with" #28073

Action Performed:

Expected Result:

Actual Result:

Workaround:

Platforms:

Proposal

Please re-state the issue

What is the root cause of this issue?

What changes do you think should be made to fix this problem?

What other alternative options did you explore? (Optional)

Bug0 Triage Checklist (Main S/O)

44 remaining items

Metadata

Assignees

Labels

Type

Projects

Milestone

Relationships

Development

	{Boolean(participants.length) && (
	<MoneyRequestConfirmationList
	hasMultipleParticipants
	payeePersonalDetails={payeePersonalDetails}
	selectedParticipants={participantsExcludingPayee}
	iouAmount={splitAmount}
	iouComment={splitComment}
	iouCurrencyCode={splitCurrency}
	iouType={CONST.IOU.MONEY_REQUEST_TYPE.SPLIT}
	isReadOnly
	shouldShowFooter={false}
	/>
	)}

	<View style={[styles.flexRow, styles.alignItemsCenter]}>
	{Boolean(props.title) && (Boolean(props.shouldRenderAsHTML) \|\| (Boolean(props.shouldParseTitle) && Boolean(html.length))) && (
	<MenuItemRenderHTMLTitle title={getProcessedTitle} />
	)}
	{!props.shouldRenderAsHTML && !props.shouldParseTitle && Boolean(props.title) && (
	<Text
	style={titleTextStyle}
	numberOfLines={props.numberOfLinesTitle \|\| undefined}
	dataSet={{[CONST.SELECTION_SCRAPER_HIDDEN_ELEMENT]: props.interactive && props.disabled}}
	>
	{convertToLTR(props.title)}
	</Text>
	)}

	{/*
	* The MoneyRequestConfirmationList component uses a SectionList which uses a VirtualizedList internally.
	* VirtualizedList cannot be directly nested within ScrollViews of the same orientation.
	* To work around this, we wrap the MoneyRequestConfirmationList component with a horizontal ScrollView.
	*/}
	<ScrollView contentContainerStyle={[styles.flexGrow1]}>
	<ScrollView
	horizontal
	contentContainerStyle={[styles.flex1, styles.flexColumn]}
	>
	<MoneyRequestConfirmationList

[$500] Web - Request Money - Long description is showing without "Paid by" and "Split with" #28073

Description

Action Performed:

Expected Result:

Actual Result:

Workaround:

Platforms:

Activity

esh-g commented on Sep 23, 2023

Proposal

Please re-state the issue

What is the root cause of this issue?

What changes do you think should be made to fix this problem?

What other alternative options did you explore? (Optional)

melvin-bot commented on Sep 23, 2023

melvin-bot commented on Sep 23, 2023

melvin-bot commented on Sep 23, 2023

Bug0 Triage Checklist (Main S/O)

melvin-bot commented on Sep 23, 2023

melvin-bot commented on Sep 23, 2023

44 remaining items

melvin-bot commented on Oct 21, 2023

melvin-bot commented on Oct 21, 2023

thuyle04 commented on Oct 23, 2023

melvin-bot commented on Oct 23, 2023

melvin-bot commented on Oct 23, 2023

situchan commented on Oct 24, 2023

melvin-bot commented on Oct 27, 2023

situchan commented on Oct 27, 2023

Metadata

Metadata

Assignees

Labels

Type

Projects

Milestone

Relationships

Development

Issue actions