Search - Expense preview with multiline description shows two spacings between each line

[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.70-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: N/A Issue reported by: Applause - Internal Team

Action Performed:

1. Go to staging.new.expensify.com
2. Submit an expense to a user with no unsettled expense, and include a multiline description in the expense
3. Note the expense preview in LHN shows one spacing between each line
4. Click on the search icon
5. Note that expense preview in search list

Expected Result:

The expense preview in search list will also show one spacing between each line

Actual Result:

The expense preview in search list alsos two spacings between each line

Workaround:

Unknown

Platforms:

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

• [x] Android: Native
• [x] Android: mWeb Chrome
• [x] iOS: Native
• [x] iOS: mWeb Safari
• [x] MacOS: Chrome / Safari
• [x] MacOS: Desktop

Screenshots/Videos

Add any screenshot/video evidence

https://github.com/Expensify/App/assets/78819774/01f4bd19-4390-4b95-a4f0-ad19993ef37e

View all open jobs on GitHub

[melvin-bot[bot]]

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

[lanitochka17]

We think that this bug might be related to #vip-vsp

[lanitochka17]

@mallenexpensify FYI I haven't added the External label as I wasn't 100% sure about this issue. Please take a look and add the label if you agree it's a bug and can be handled by external contributors

[melvin-bot[bot]]

Triggered auto assignment to @dannymcclain (Design), see these Stack Overflow questions for more details.

[mallenexpensify]

@dannymcclain , do you happen to know if this is expected behaviour?

[dannymcclain]

@mallenexpensify I don't think it's expected—I would imagine the LHN and search rows would look the same. At the same time, I would say this is extremely minor.

[bernhardoj]

Proposal

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

The multi-line description of an expense request shows extra spacing between lines on the search page, but not in LHN.

What is the root cause of that problem?

This issue happens after my PR here. In the PR, we are fixing an issue where the LHN subtitle is shown as multiline when we set the expense description to multiline by replacing all new line characters with a whitespace. https://github.com/Expensify/App/blob/2f5173c9c0f041967acfbdf9581ce52327623fa6/src/libs/ReportUtils.ts#L1630

The LINE_BREAK regex is then updated to consider a case where the new line character is \r\n as found here. https://github.com/Expensify/App/blob/2f5173c9c0f041967acfbdf9581ce52327623fa6/src/CONST.ts#L1879

But the new regex (\r|\n) matches each \r and \n and replaces it with whitespace, so if we have \r\n, we will end up with 2 whitespaces. This isn't noticeable in LHN because the text style set the white-space to nowrap which collapses the whitespace into a single whitespace.

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

Update the LINE_BREAK regex replace both \r\n into a single whitespace.

// stricter, if \n\r is given, then we will have 2 whitespaces, which I believe is expected
LINE_BREAK: /\r\n|\r|\n/g,

OR

// shorter, but will match \n\r too
LINE_BREAK: /[\r\n]+/g,

we can optionally set the white-space back to pre for the LHN that gets removed in this PR

[dannymcclain]

Not overdue Melvin.

[mallenexpensify]

@dannymcclain If we updated it so that Hello Hello

Didn't show as Hello Hello in LHN, it'd just show Hello. In another example. If someone sent. Hi, What's the ETA on the project If we fixed this to recognize the line break, we'd only show Hi, in LHN. I don't think that's better than showing ``Hi, What's the ETA on the project'

OOOOOOOF... check this weirdness, it shows all the text in LHN then the second line gets removed for some reason

https://github.com/Expensify/App/assets/22508304/f11f9f3e-e86d-45e8-b780-d0db06312fa1

[dannymcclain]

Whoaaaa, that is weird haha. I totally agree that "fixing" it to just show Hi, is not better than Hi, What's the ETA on the project

In the video posted on the issue description, the LHN looks fine to me.

The expense description is

Hello
Hello

And the LHN displays Hello Hello.

But the search row displays Hello Hello with an extra space between the lines.

[MelvinBot]

This has been labelled "Needs Reproduction". Follow the steps here: https://stackoverflowteams.com/c/expensify/questions/16989

[mallenexpensify]

Bumping to weekly and adding Needs Reproduction because this isn't a top priority and I want to suss things out next week once the site's doing better, then add it to a project. We should def align on what we think is best for how we should multi-line posts in LHN from comments on reports as well as expenses, tasks, ???

[dannymcclain]

We should def align on what we think is best for how we should multi-line posts in LHN from comments on reports as well as expenses, tasks, ???

cc @Expensify/design in case y'all have any strong feelings about this. (My feelings are all pretty mild right now.)

[dubielzyk-expensify]

Yeah agree, but very mild here too. I think showing it the preview on 1 line is desirable, but without double spaces. That being said it's an extremely minor issue

[dannymcclain]

I think showing it the preview on 1 line is desirable, but without double spaces. That being said it's an extremely minor issue

Totally agree.

[shawnborton]

Yup, similar feelings here as well.

Interesting that we even allow multi-line descriptions though and render them that way on the preview card... just flagging @trjExpensify for vis

[trjExpensify]

Interesting that we even allow multi-line descriptions though and render them that way on the preview card... just flagging @trjExpensify for vis

I think for this one we have a cap at something like 40 characters or something like that, I can't recall exactly what it is but I remember it from before.

[trjExpensify]

As for the bug in the OP, I agree it's really minor. @bernhardoj has identified his PR that caused it though, so can't we fix it as a follow-up to remove the second white space in Search? @parasharrajat for the C+ review as well to keep both on it.

[parasharrajat]

I think updating the regex is a better solution. I think @bernhardoj's proposal works great.

:ribbon: :eyes: :ribbon: C+ reviewed

[melvin-bot[bot]]

Triggered auto assignment to @carlosmiceli, see https://stackoverflow.com/c/expensify/questions/7972 for more details.

[carlosmiceli]

@trjExpensify @mallenexpensify @shawnborton sorry to be a bit confused here, but what would be the course of action for me at this point? I see that there's a proposal that's widely approved by everyone here, so how do I help this move forward?

[mallenexpensify]

@carlosmiceli , this one is a lil tricky. I assigned to @parasharrajat and @bernhardoj cuz of the below.

@bernhardoj has identified his PR that caused it though, so can't we fix it as a follow-up to remove the second white space in Search? @parasharrajat for the C+ review as well to keep both on it.

[shawnborton]

I guess we want to make sure the preview in the LHN only shows one space between the two lines.

But for me... I am wondering, do we want to accept multi-line descriptions in the preview card as well? Or should we force the line breaks to just become spaces?

Basically we don't allow for line breaks when you set a merchant, but we do when you set a description. And it creates an inconsistency when the preview card has a merchant vs when it has a description with a line break.

I don't feel too strongly here though, just noting that it's different. I think I would prefer to remove the line breaks and just use one line of text and stay consistent with truncating everything after two lines, both for merchants and descriptions

Also note, this is what it looks like when your description has three lines 🤦 we should fix this as well to remove the trailing ellipsis:

[dannymcclain]

I think I would prefer to remove the line breaks and just use one line of text and stay consistent with truncating everything after two lines, both for merchants and descriptions

Also note, this is what it looks like when your description has three lines 🤦 we should fix this as well to remove the trailing ellipsis:

I'm on board for that update Shawn, and agree we should do our best to fix that little ellipsis dangler.

[parasharrajat]

@bernhardoj Could you please add changes for that into your proposal?

[dubielzyk-expensify]

I think I would prefer to remove the line breaks and just use one line of text and stay consistent with truncating everything after two lines, both for merchants and descriptions

This makes sense to me too. 1 line work better especially when it's a preview and the full info is a tap away anyway.

[parasharrajat]

@bernhardoj We can start working on the PR. Looks like this issue is missing exported label which creates the Up job.

[bernhardoj]

The PR is here

cc: @parasharrajat

[carlosmiceli]

@parasharrajat Just added the external label because I noticed it was missing, is that what you meant?