[HOLD for payment 2022-11-02] [$250] The ‘Multiple users are typing’ vertical text alignment is incorrect

[mvtglobally]

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. Open group chat as user A
2. Type as User B on another device
3. Observe underlying "typing..." display as User A
4. Type as User B and User C on 2 different devices simultaneously
5. Observe underlying "typing..." display as User A

Expected Result:

Text should be aligned

Actual Result:

The ‘Multiple users are typing’ vertical text alignment is incorrect. When a single user is typing the text remains centered, but when multiple users are typing the text becomes uncentered:

Workaround:

Can the user still use Expensify without this being fixed? Have you informed them of the workaround?

Platform:

Where is this issue occurring?

• Web
• Desktop App

Version Number: 1.1.88-14
Reproducible in staging?: Y
Reproducible in production?: Y
Email or phone of affected tester (no customers):
Logs: https://stackoverflow.com/c/expensify/questions/4856
Notes/Photos/Videos: Any additional supporting documentation

WebmultipleUsersTyping.mov

Expensify/Expensify Issue URL:
Issue reported by: @Julesssss
Slack conversation: https://expensify.slack.com/archives/C01GTK53T8Q/p1660833359041749

View all open jobs on GitHub

[melvin-bot]

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

[Julesssss]

@robertjchen I'll take this as I'm on the C+ team, and reported the issue.

[melvin-bot]

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

[mdneyazahmad]

Proposal

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

Lines 64 to 87 in ca4ba68

	case 1:
	return (
	<TextWithEllipsis
	leadingText={PersonalDetails.getDisplayName(this.state.usersTyping[0])}
	trailingText={` ${this.props.translate('reportTypingIndicator.isTyping')}`}
	textStyle={[styles.chatItemComposeSecondaryRowSubText]}
	wrapperStyle={[styles.chatItemComposeSecondaryRow]}
	leadingTextParentStyle={styles.chatItemComposeSecondaryRowOffset}
	/>
	);
	default:
	return (
	<Text
	style={[
	styles.chatItemComposeSecondaryRowSubText,
	styles.chatItemComposeSecondaryRowOffset,
	]}
	numberOfLines={1}
	>
	{this.props.translate('reportTypingIndicator.multipleUsers')}
	{` ${this.props.translate('reportTypingIndicator.areTyping')}`}
	</Text>
	);

Use same component that is used to display single user typing message.

-                    <Text
-                        style={[
-                            styles.chatItemComposeSecondaryRowSubText,
-                            styles.chatItemComposeSecondaryRowOffset,
-                        ]}
-                        numberOfLines={1}
-                    >
-                        {this.props.translate('reportTypingIndicator.multipleUsers')}
-                        {` ${this.props.translate('reportTypingIndicator.areTyping')}`}
-                    </Text>
+                    <TextWithEllipsis
+                        leadingText={this.props.translate('reportTypingIndicator.multipleUsers')}
+                        trailingText={` ${this.props.translate('reportTypingIndicator.areTyping')}`}
+                        textStyle={[styles.chatItemComposeSecondaryRowSubText]}
+                        wrapperStyle={[styles.chatItemComposeSecondaryRow]}
+                        leadingTextParentStyle={styles.chatItemComposeSecondaryRowOffset}
+                    />

Before

After

[MitchExpensify]

Upwork Job