[HOLD for Santhosh] [$1000] mWeb - New room - Room names in LHN do not match the name when created

[kbecciv]

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:

1. Go to https://staging.new.expensify.com/
2. Log in with a High traffic account that owns a existing Workspace
3. Click on the green + button
4. Click on the "New Room" option
5. Set the name of the #Room to anything you'd like (following the correct format)
6. Go to LHN

Expected Result:

The name of the room matches the name when created

Actual Result:

Room names in LHN do not match the name when created. Room name shows 0 at the end

Workaround:

Unknown

Platforms:

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

• Android / native
• Android / Chrome
• iOS / native
• iOS / Safari
• MacOS / Chrome / Safari
• MacOS / Desktop

Version Number: 1.3.26.1

Reproducible in staging?: yes

Reproducible in production?: yes

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

Bug6086477_Screen_Recording_20230609_090130_Chrome.mp4

Bug6086477_2023_06_09_13_46_Img_9746.mp4

Expensify/Expensify Issue URL:

Issue reported by: Applause - Internal Team / @Natnael-Guchima

Slack conversation:

View all open jobs on GitHub

Upwork Automation - Do Not Edit

• Upwork Job URL: https://www.upwork.com/jobs/~01172d30b33b712701
• Upwork Job ID: 1667249070496825344
• Last Price Increase: 2023-06-09

[melvin-bot]

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

[melvin-bot]

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

[hungvu193]

Proposal

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

mWeb - New room - Room names in LHN do not match the name when created

What is the root cause of that problem?

Let take a look at this piece of code:

App/src/components/DisplayNames/index.js

Lines 108 to 114 in f64a388

	{this.props.displayNamesWithTooltips.length > 1 && this.state.isEllipsisActive && (
	<View style={styles.displayNameTooltipEllipsis}>
	<Tooltip text={this.props.fullTitle}>
	{/* There is some Gap for real ellipsis so we are adding 4 `.` to cover */}
	<Text>....</Text>
	</Tooltip>
	</View>

As we can see we will render the tooltip when this.props.displayNamesWithTooltips.length > 1 and this.state.isEllipsisActive is true.

App/src/components/DisplayNames/index.js

Line 23 in f64a388

isEllipsisActive: this.containerRef && this.containerRef.offsetWidth && this.containerRef.scrollWidth && this.containerRef.offsetWidth < this.containerRef.scrollWidth,

The problem is the this.containerRef.offsetWidth and this.containerRef.scrollWidth can be zero when we resize window.

Now this.state.isEllipsisActive can be 0:

And because of that the condition here will render 0 with this.props.displayNamesWithTooltips.length > 1.

App/src/components/DisplayNames/index.js

Lines 108 to 114 in f64a388

	{this.props.displayNamesWithTooltips.length > 1 && this.state.isEllipsisActive && (
	<View style={styles.displayNameTooltipEllipsis}>
	<Tooltip text={this.props.fullTitle}>
	{/* There is some Gap for real ellipsis so we are adding 4 `.` to cover */}
	<Text>....</Text>
	</Tooltip>
	</View>

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

Make sure the this.state.isEllipsisActive is boolean value. We should cast it to Boolean.

 {this.props.displayNamesWithTooltips.length > 1 && Boolean(this.state.isEllipsisActive) && (
                    <View style={styles.displayNameTooltipEllipsis}>
                        <Tooltip text={this.props.fullTitle}>
                            {/* There is some Gap for real ellipsis so we are adding 4 `.` to cover */}
                            <Text>....</Text>
                        </Tooltip>
                    </View>
                )}

What alternative solutions did you explore? (Optional)

We can disable tooltip with mobile web

[melvin-bot]

Job added to Upwork: https://www.upwork.com/jobs/~01172d30b33b712701

[melvin-bot]

Current assignee @NicMendonca is eligible for the External assigner, not assigning anyone new.

[melvin-bot]

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

[melvin-bot]

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