[HOLD for payment 2021-11-11] Chat - "Typing" isn't visible when someone from another account has longer email is typing

[kavimuru]

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. Lunch the app
2. Log in with any account ( Account A)
3. Log in with another account where you don't have any last and first name to sets up ( Account B)
4. Start typing from Account B to Account A

Expected Result:

"Typing" is visible when someone from another account has longer email without name is typing

Actual Result:

"Typing" isn't visible when someone from another account has longer email without name is typing

Workaround:

Unknown

Platform:

Where is this issue occurring?

• iOS
• Android
• Mobile Web

Version Number: 1.1.4.0
Reproducible in staging?: Yes
**Reproducible in production?:**Yes
Logs: https://stackoverflow.com/c/expensify/questions/4856
Notes/Photos/Videos:

Expensify/Expensify Issue URL:
Issue reported by: Applause
Slack conversation:

View all open jobs on GitHub

[MelvinBot]

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

[PrashantMangukiya]

Proposed Solution (If consider External)

We need to update code within src/pages/home/report/ReportTypingIndicator.js
i..e Add ellipsizeMode="middle" for Text component i..e After line 62, 77, and 94 , So it shows ... in between long text.

App/src/pages/home/report/ReportTypingIndicator.js

Lines 57 to 66 in e70c1eb

	<Text
	style={[
	styles.chatItemComposeSecondaryRowSubText,
	styles.chatItemComposeSecondaryRowOffset,
	]}
	numberOfLines={1}
	>
	{getDisplayName(this.state.usersTyping[0])}
	{` ${this.props.translate('reportTypingIndicator.isTyping')}`}
	</Text>

App/src/pages/home/report/ReportTypingIndicator.js

Lines 72 to 83 in e70c1eb

	<Text
	style={[
	styles.chatItemComposeSecondaryRowSubText,
	styles.chatItemComposeSecondaryRowOffset,
	]}
	numberOfLines={1}
	>
	{getDisplayName(this.state.usersTyping[0])}
	{` ${this.props.translate('common.and')} `}
	{getDisplayName(this.state.usersTyping[1])}
	{` ${this.props.translate('reportTypingIndicator.areTyping')}`}
	</Text>

App/src/pages/home/report/ReportTypingIndicator.js

Lines 89 to 98 in e70c1eb

	<Text
	style={[
	styles.chatItemComposeSecondaryRowSubText,
	styles.chatItemComposeSecondaryRowOffset,
	]}
	numberOfLines={1}
	>
	{this.props.translate('reportTypingIndicator.multipleUsers')}
	{` ${this.props.translate('reportTypingIndicator.areTyping')}`}
	</Text>

i.e. Add add ellipsizeMode="middle" at three places i..e After line 62 (for Single User), 77 (for Two User), and 94 (for More than two user) as shown under.

<Text 
     ...
     numberOfLines={1} 
     ellipsizeMode="middle"       // *** Add this line
 > 
     {getDisplayName(this.state.usersTyping[0])} 
     {` ${this.props.translate('reportTypingIndicator.isTyping')}`} 
 </Text> 

<Text 
    ...
     numberOfLines={1} 
     ellipsizeMode="middle"     // *** Add this line
 > 
     {getDisplayName(this.state.usersTyping[0])} 
     {` ${this.props.translate('common.and')} `} 
     {getDisplayName(this.state.usersTyping[1])} 
     {` ${this.props.translate('reportTypingIndicator.areTyping')}`} 
 </Text> 

<Text 
    ...
     numberOfLines={1} 
     ellipsizeMode="middle"     // *** Add this line
 > 
     {this.props.translate('reportTypingIndicator.multipleUsers')} 
     {` ${this.props.translate('reportTypingIndicator.areTyping')}`} 
 </Text> 

Important: ellipsizeMode="middle" works for IOS and Android as shown under. But Not Support in Web, Mobile Web and Desktop.

iOS

Android

[MelvinBot]

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

[isagoico]

Issue reproducible during KI retests

[bfitzexpensify]

Upwork posting

[akshayasalvi]

Proposal

Because ellipsizeMode doesn't work for 3 of 5 platforms, my recommendation would be, let's split the content into their individual Text blocks and use flex: row.

An example implementation:

<Text
    style={[
        styles.chatItemComposeSecondaryRowSubText,
        styles.chatItemComposeSecondaryRowOffset,
    ]}
    numberOfLines={1}
>
    {getDisplayName(this.state.usersTyping[0])}
</Text>
<Text
    style={[
        styles.chatItemComposeSecondaryRowSubText,
        styles.chatItemComposeSecondaryRowOffset,
    ]}
    numberOfLines={1}
>
    {` ${this.props.translate('common.and')} `}
</Text>
<Text
    style={[
        styles.chatItemComposeSecondaryRowSubText,
        styles.chatItemComposeSecondaryRowOffset,
    ]}
    numberOfLines={1}
>
    {getDisplayName(this.state.usersTyping[1])}
</Text>
<Text
    style={[
        styles.chatItemComposeSecondaryRowSubText,
        styles.chatItemComposeSecondaryRowOffset,
    ]}
    numberOfLines={1}
>
    {` ${this.props.translate('reportTypingIndicator.areTyping')}`}
</Text>

Anyway, each of the content is rendered separately.

We can even reduce the repetition of <Text> with chatItemComposeSecondaryRowSubText and styles.chatItemComposeSecondaryRowOffset styles.

[mvtglobally]

Issue reproducible during KI retests.

[akshayasalvi]

@bfitzexpensify Any updates on this one?

[bfitzexpensify]

Sorry @akshayasalvi — currentlly looking for an engineer to review the proposal. Hang tight!

[bfitzexpensify]

Hello @NikkiWines, the exported label isn't working so I randomly chose you from the list of engineering contributor managers 😄.

@akshayasalvi has a solution above, so hopefully this one is straightforward. Ty for your understanding

[parasharrajat]

I have few points to share here and I don't think that the proposed solution would produce the desired result.

Why?

1. If we divide the text as proposed then we will end up with multiple ... on the row. and still, we won't be able to see which users are messaging (in case of multiple users).

What I propose.

1. Either we show eg: User A +2 users are typing. + number of users, after the first user name.

2. Or, We animate the typing string one by one for each user.

It would work like this

 USER A is typing...
 USer B
 USer C

Here User part will fade and the user's name will change one by one.

Thought?

[NikkiWines]

I think I prefer the idea of User A and <x> others are typing as opposed to using ellipsis. However, let's ask someone from the design team to see if there's a preference here.

cc: @Expensify/design

[NikkiWines]

Ah, I see. But then, the issue would also persist for multiple two users if one (or both) of those users had very long logins and both were typing.

[parasharrajat]

Sorry for dropping the different context in but this issue indirectly affects the scenario where multiple users are typing.

As Nikki said that User A and user B are typing... is better. Then

we can divide Typing Text block into two blocks instead of multiple for each user and other words and etc.

It would be like

<Text > User A and user B</Text> // only ellipsis for this.
<Text> are typing..</Text>

This way we can preserve the are typing... and only one ellipsis.

The other two approaches, I have explained above.

[shawnborton]

Hmm I'm not sure what is best then, @NikkiWines curious for your thoughts. I think we should avoid any kind of cheeky animation though if we can.

[NikkiWines]

I don't know if having an elipsis for User A and User B only would work, since there's a possibility of it resulting in something misleading like:

User+with+super+long+name+or+email and User B are typing...

becoming:

User+with+super+long... are typing

I wonder if maybe we could simplify this. Instead of 3 different potential copies, maybe we could do:

• 1 user typing:
  User A (elipsis if necessary) is typing
• 2 or more users typing:
  <x> users are typing or <x> people are typing

Not sure if we have some reasoning for separate copy for 2 users typing vs 3 users typing though

[shawnborton]

I like simplifying this to 2 scenarios! We could even keep it super generic like "Multiple people are typing..." instead of having to worry about updating the count.

[akshayasalvi]

This makes more sense. This can then just be simplified by removing case 2: from ReportTypingIndicator swith case.

and then as I suggested split the content into multiple <Text> block when we have 1 user. This way ellipses can only be added to the User Text block and not the others.

[NikkiWines]

Yep, that makes sense to me! @bfitzexpensify could you hire @akshayasalvi for this issue please, thank you!

[mvtglobally]

Issue reproducible during KI retests.

[parasharrajat]

Obviously, I am late to the party but...

I will be reviewing the PR and I will let you know @NikkiWines when this is ready for final review and possibly for merge. See More

[mvtglobally]

Issue reproducible during KI retests.

[mallenexpensify]

@bfitzexpensify updated title to pay on 11/8, doesn't look like was auto updated yesterday when the issue closed. Also reopening this til contributor is paid. @NikkiWines let me know if I'm missing anything here

[NikkiWines]

Oh sorry, must've auto-closed cause I merged the PR. Your update looks good @mallenexpensify

[botify]

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

• Typing indicator ellipses #5933

If no regressions arise, payment will be issued on 2021-11-11. 🎊

[akshayasalvi]

@NikkiWines @mallenexpensify I am not sure why the payment date changed to Nov 11 from Nov 8. Didn't find any reported regression.

[parasharrajat]

Payment date is 7 days after deployment to PROD #5933 (comment)

[mvtglobally]

Issue not reproducible during KI retests. (First Week)

[bfitzexpensify]

Contract ended, payment finalised - thanks @akshayasalvi!