Spaces are not displayed after sending the message #3859

isagoico · 2021-07-01T20:49:18Z

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:

Log in to e.cash and navigate to a conversation
Send the following text

0 space
 1 spaces
  2 spaces
   3 spaces
    4 spaces

Expected Result:

Spaces should be displayed in the message after it's sent

Actual Result:

No spaces are displayed in the conversation after sending the message

Workaround:

N/A

Platform:

Where is this issue occurring?

Web ✔️
iOS
Android
Desktop App
Mobile Web

Version Number: 1.0.75-5

Logs: https://stackoverflow.com/c/expensify/questions/4856

Notes/Photos/Videos:

Expensify/Expensify Issue URL:

View all open jobs on Upwork

From @mallenexpensify https://expensify.slack.com/archives/C01GTK53T8Q/p1625162491337400

Issue: Spaces at the beginning of lines are removed when sending a message

The text was updated successfully, but these errors were encountered:

MelvinBot · 2021-07-01T20:49:20Z

Triggered auto assignment to @sophiepintoraetz (AutoAssignerTriage), see https://stackoverflow.com/c/expensify/questions/4749 for more details.

MelvinBot · 2021-07-01T20:49:27Z

Triggered auto assignment to @thienlnam (Engineering), see https://stackoverflow.com/c/expensify/questions/4319 for more details.

MelvinBot · 2021-07-01T21:34:00Z

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

rdjuric · 2021-07-01T21:59:40Z

I think this might also need a fix on the BE? Looks like we're doing a .trim() on the frontend and on the backend.
Sending reportComment: " hey you" to our API we receive html: "hey you" text: "hey you"

sophiepintoraetz · 2021-07-01T22:03:14Z

Hmm - @isagoico / @thienlnam out of curiosity, why did we skip the triage process?

parasharrajat · 2021-07-01T23:18:05Z

Proposal

This one is a bug with react-native-render-html but the lib owner has added an experimental flag that enables the whitespaces. Otherwise empty whitespaces will be collapsed. Due to the reason that

0 space
 1 spaces
  2 spaces
   3 spaces
    4 spaces

is converted to HTML 0 space<br /> 1 spaces<br /> 2 spaces<br /> 3 spaces<br /> 4 spaces.
It does not have enclosing tags which would have preserved the spaces. And the way, react-native-render-html handles whitespaces other whitespaces is being collapsed.

But setting dangerouslyDisableWhitespaceCollapsing to true keep those spaces.

Good News.

We were using the alpha version of this lib but the Lib owner released the Beta stable version today so we can upgrade and this flag will start working for us.

I have tested the code after upgrading the lib and there are no breaking changes. 🥳 🥳

Just need to change few props and the RenderHTML component will look like

  <HTML
            textSelectable={textSelectable}
            renderers={renderers}
            baseStyle={webViewStyles.baseFontStyle}
            tagsStyles={webViewStyles.tagStyles}
            enableCSSInlineProcessing={false}
            contentWidth={containerWidth}
            computeImagesMaxWidth={computeImagesMaxWidth}
            systemFonts={EXTRA_FONTS}
            dangerouslyDisableWhitespaceCollapsing
            renderersProps={{
                img: {
                    initialDimensions: {
                        width: MAX_IMG_DIMENSIONS,
                        height: MAX_IMG_DIMENSIONS,
                    },
                },
            }}
            source={{html}}
            debug={debug}
        />
    );

Result

thienlnam · 2021-07-01T23:33:48Z

@sophiepintoraetz Ah my bad, I should have caught that - I didn't check the sequence of events and just went ahead with the process

thienlnam · 2021-07-01T23:40:00Z

I think this might also need a fix on the BE? Looks like we're doing a .trim() on the frontend and on the backend.
Sending reportComment: " hey you" to our API we receive html: "hey you" text: "hey you"

For the example text, the spaces are within a text paragraph so they shouldn't be getting filtered out so this is probably something to do with our parser / Expensimark

thienlnam · 2021-07-01T23:41:06Z

@parasharrajat 🟢 on the proposal, I don't think there is currently an upwork job for it yet but once that gets created we'll assign you to it

MitchExpensify · 2021-07-01T23:52:28Z

Upwork job!

MelvinBot · 2021-07-01T23:52:39Z

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

thienlnam · 2021-07-02T00:48:52Z

@MitchExpensify Could you also please hire @parasharrajat for the job?

MitchExpensify · 2021-07-02T02:01:23Z

Will do when @parasharrajat applies!

isagoico · 2021-07-02T11:34:05Z

Hmm - @isagoico / @thienlnam out of curiosity, why did we skip the triage process?

@sophiepintoraetz / @thienlnam this was my bad, I created the issue with the AutoassignerTriage label accidentally (I pressed ctrl + enter which created the issue before I was done 🤦). We have been instructed that issues created on the #Expensify-open-source channel should have the engineering label from the start. My apologies for the confusion and the unnecessary bump 🙇‍♀️

sophiepintoraetz · 2021-07-04T02:45:59Z

Thanks @isagoico for the context! @MitchExpensify - can you confirm this or did I miss something, as I thought all issues were to go through the triage > engineering flow?

(this might actually be tying into what John S is looking into)

MitchExpensify · 2021-07-05T16:54:40Z

Yes thats right @sophiepintoraetz ! What issue is John working on?

parasharrajat · 2021-07-15T11:05:42Z

Requesting to reopen this. Due to the reason PR was reverted after an accidental merge, we still have this issue.

I am holding this as it depends on another Issue

parasharrajat · 2021-07-18T18:08:57Z

Hey Guys,#3869 PR was reverted as I wanted to hold that until #4047 is merged. I think he is more qualified to do the changes to upgrade which is a core part of my PR.
Also, there are very good points on why we should not move with this issue #3951 (comment) & #3951 (comment) from the Lib owner itself. After those points I agree, maybe it is best we don't do it. But #3869 is already fixing it if we want to proceed with this issue. Open to discussion.

MitchExpensify · 2021-07-20T14:55:47Z

Hey @parasharrajat, I'd say this is a good discussion Slack channel if you'd like to bring it there! (Probably won't get many eyes on it here)

isagoico added the AutoAssignerTriage Auto assign issues for triage to an available triage team member label Jul 1, 2021

MelvinBot assigned sophiepintoraetz Jul 1, 2021

MelvinBot removed the AutoAssignerTriage Auto assign issues for triage to an available triage team member label Jul 1, 2021

isagoico added Daily KSv2 Engineering labels Jul 1, 2021

MelvinBot assigned thienlnam Jul 1, 2021

isagoico unassigned sophiepintoraetz Jul 1, 2021

isagoico changed the title ~~Spaces are removed after sending the message~~ Spaces are nos displayed after sending the message Jul 1, 2021

isagoico changed the title ~~Spaces are nos displayed after sending the message~~ Spaces are not displayed after sending the message Jul 1, 2021

thienlnam added the External Added to denote the issue can be worked on by a contributor label Jul 1, 2021

MelvinBot assigned MitchExpensify Jul 1, 2021

thienlnam assigned parasharrajat and unassigned thienlnam Jul 1, 2021

MitchExpensify added the Exported label Jul 1, 2021

MelvinBot assigned Beamanator Jul 1, 2021

MitchExpensify removed their assignment Jul 1, 2021

thienlnam unassigned Beamanator Jul 1, 2021

parasharrajat mentioned this issue Jul 2, 2021

[Hold] fixed spaces collapsing in Messages #3869

Merged

5 tasks

jsamr mentioned this issue Jul 9, 2021

[Hold for Payment 30th July] Upgrade react-native-render-html to latest (6.0.0-beta.8) #3951

Closed

jasperhuangg closed this as completed in #3869 Jul 10, 2021

This was referenced May 14, 2022

[HOLD for payment 2022-05-25][$1000] Non-unique keys React warning. Possibly related to RenderHTML ? #8655

Closed

Fix issue with non-unique keys React warning #9025

Merged

Provide feedback

Saved searches

Use saved searches to filter your results more quickly

Spaces are not displayed after sending the message #3859

Spaces are not displayed after sending the message #3859

isagoico commented Jul 1, 2021 •

edited

Loading

MelvinBot commented Jul 1, 2021

MelvinBot commented Jul 1, 2021

MelvinBot commented Jul 1, 2021

rdjuric commented Jul 1, 2021 •

edited

Loading

sophiepintoraetz commented Jul 1, 2021

parasharrajat commented Jul 1, 2021 •

edited

Loading

thienlnam commented Jul 1, 2021

thienlnam commented Jul 1, 2021

thienlnam commented Jul 1, 2021

MitchExpensify commented Jul 1, 2021

MelvinBot commented Jul 1, 2021

thienlnam commented Jul 2, 2021

MitchExpensify commented Jul 2, 2021

isagoico commented Jul 2, 2021

sophiepintoraetz commented Jul 4, 2021

MitchExpensify commented Jul 5, 2021

parasharrajat commented Jul 15, 2021

parasharrajat commented Jul 18, 2021

MitchExpensify commented Jul 20, 2021

Spaces are not displayed after sending the message #3859

Spaces are not displayed after sending the message #3859

Comments

isagoico commented Jul 1, 2021 • edited Loading

Action Performed:

Expected Result:

Actual Result:

Workaround:

Platform:

MelvinBot commented Jul 1, 2021

MelvinBot commented Jul 1, 2021

MelvinBot commented Jul 1, 2021

rdjuric commented Jul 1, 2021 • edited Loading

sophiepintoraetz commented Jul 1, 2021

parasharrajat commented Jul 1, 2021 • edited Loading

Proposal

Good News.

Result

thienlnam commented Jul 1, 2021

thienlnam commented Jul 1, 2021

thienlnam commented Jul 1, 2021

MitchExpensify commented Jul 1, 2021

MelvinBot commented Jul 1, 2021

thienlnam commented Jul 2, 2021

MitchExpensify commented Jul 2, 2021

isagoico commented Jul 2, 2021

sophiepintoraetz commented Jul 4, 2021

MitchExpensify commented Jul 5, 2021

parasharrajat commented Jul 15, 2021

parasharrajat commented Jul 18, 2021

MitchExpensify commented Jul 20, 2021

isagoico commented Jul 1, 2021 •

edited

Loading

rdjuric commented Jul 1, 2021 •

edited

Loading

parasharrajat commented Jul 1, 2021 •

edited

Loading