User Typing... area gets hidden after entering multiple lines - Reported by @Santhosh-Sellavel by

[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 new dot and open any chat
2. Enter multiline text in the composer

Expected Result:

User Typing area should be available, and composer should not shift up and down.

Actual Result:

The user Typing area is taken by the composer box after entering multiple lines. so when the user typing appears composer shifts up and down,

Workaround:

unknown

Platform:

Where is this issue occurring?

• Web
• iOS
• Android
• Desktop App
• Mobile Web

Version Number: 1.1.88-10
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

Screen.Recording.2022-08-08.at.10.06.42.PM.mov

Expensify/Expensify Issue URL:
Issue reported by: @Santhosh-Sellavel
Slack conversation: https://expensify.slack.com/archives/C01GTK53T8Q/p1659980797019179

View all open jobs on GitHub

[melvin-bot]

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

[mdneyazahmad]

Proposal

Screen.Recording.2022-08-24.at.7.55.12.PM.mov

As we can see parent component has min height of 90 (styles.chatItemComposeWithFirstRow), timezone area 15 + 10(margin) and composer 40, , rest (90 - 40 -25) = 25 is free.

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

Lines 680 to 684 in cd2f569

	<View style={[styles.flexRow, styles.justifyContentBetween, styles.alignItemsCenter]}>
	{!this.props.isSmallScreenWidth && <OfflineIndicator containerStyles={[styles.chatItemComposeSecondaryRow]} />}
	<ReportTypingIndicator reportID={this.props.reportID} />
	<ExceededCommentLength commentLength={this.comment.length} />
	</View>

When ReportTypingIndicator and ExceededCommentLength return null and OfflineIndicator is not rendered. There is no content in the view and it is empty so it does not occupy any space.

When there is only one line composer height is 40 and 25 will be free so there is space to render typing... so there is no shifting. When composer height increases it occupies the empty space and there is no space after composer. When user starts typing.... It does not have any space to the bottom and now when the typing... is rendered it shift the composer.

---

We need to apply a fixed height to reserve the space for displaying the typing... or other messages as inside the component.

<View style={[styles.flexRow, styles.justifyContentBetween, styles.alignItemsCenter, {height: 25}]}> 

We can apply the height directly or create a style object and apply it here. We can find a better value for the height 25 seems fine during my testing.

Result

Screen.Recording.2022-08-24.at.8.26.55.PM.mov

[melvin-bot]

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

[jasperhuangg]

Seems like I'm unable to reproduce this issue right now in production or staging cc @Santhosh-Sellavel
Can we maybe provide some more detailed reproduction steps, or maybe this was fixed recently?

Staging v1.1.89-2

Untitled.mov

[Santhosh-Sellavel]

@jasperhuangg

Refer the video in Issue description and the issue still exists refer your video too.

The space below composer should be available.

Before typing anything in the composer box, there is fixed space below the composer.

After typing multiple lines, space below is missing.

[jasperhuangg]

@jasperhuangg

Refer the video in Issue description and the issue still exists refer your video too.

The space below composer should be available.

Before typing anything in the composer box, there is fixed space below the composer.

After typing multiple lines, space below is missing.

@Santhosh-Sellavel gotcha, sorry I misunderstood what the problem was.

Seems like this can be exported.

[melvin-bot]

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

[jasperhuangg]

Proposal

Screen.Recording.2022-08-24.at.7.55.12.PM.mov
As we can see parent component has min height of 90 (styles.chatItemComposeWithFirstRow), timezone area 15 + 10(margin) and composer 40, , rest (90 - 40 -25) = 25 is free.

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

Lines 680 to 684 in cd2f569

	<View style={[styles.flexRow, styles.justifyContentBetween, styles.alignItemsCenter]}>
	{!this.props.isSmallScreenWidth && <OfflineIndicator containerStyles={[styles.chatItemComposeSecondaryRow]} />}
	<ReportTypingIndicator reportID={this.props.reportID} />
	<ExceededCommentLength commentLength={this.comment.length} />
	</View>

When ReportTypingIndicator and ExceededCommentLength return null and OfflineIndicator is not rendered. There is no content in the view and it is empty so it does not occupy any space.

When there is only one line composer height is 40 and 25 will be free so there is space to render typing... so there is no shifting. When composer height increases it occupies the empty space and there is no space after composer. When user starts typing.... It does not have any space to the bottom and now when the typing... is rendered it shift the composer.

We need to apply a fixed height to reserve the space for displaying the typing... or other messages as inside the component.

<View style={[styles.flexRow, styles.justifyContentBetween, styles.alignItemsCenter, {height: 25}]}> 

We can apply the height directly or create a style object and apply it here. We can find a better value for the height 25 seems fine during my testing.

Result

Screen.Recording.2022-08-24.at.8.26.55.PM.mov

@mdneyazahmad

Can we see how it would look with the offline indicator? Turn your wifi off.

[mdneyazahmad]

@jasperhuangg

[Puneet-here]

Proposal

We just have to use styles.chatItemComposeSecondaryRow ( it was removed ) below

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

Line 680 in fe39ef8

<View style={[styles.flexRow, styles.justifyContentBetween, styles.alignItemsCenter]}>

[jasperhuangg]

@Puneet-here Ah yes, I was actually the one to remove that here, reason being it was causing a display issue for the Global Offline Indicator on mobile. If we were to just add it back directly, then it would mess up the offline indicator (notice the extra spacing)

I can actually just snag this and investigate myself since I was the one to cause this regression.

[jasperhuangg]

Opened up a PR fixing the issue since I was the one to cause it in a PR that was deployed a few weeks ago.

Regardless, thank you for your proposals @mdneyazahmad @Puneet-here

Let's make sure to get @Santhosh-Sellavel compensated for discovering the regression @NicMendonca

[Santhosh-Sellavel]

Let's make sure to get @Santhosh-Sellavel compensated for discovering the regression @NicMendonca

@NicMendonca bump!

[NicMendonca]

Let's keep these Open while there's still a deliverable so that we can access via K2 :)

@Santhosh-Sellavel can you please accept the offer I sent?

[NicMendonca]

@Santhosh-Sellavel paid! sorry for the delay!

[Santhosh-Sellavel]

@jasperhuangg
Issue still reproducible in Mobile Apps

[melvin-bot]

⚠️ Looks like this issue was linked to a possible regression on PRODUCTION here

If you are the assigned CME please investigate whether the linked PR caused a regression and leave a comment with the results.

If a production regression has occurred a Root Cause Analysis is required. Please follow the instructions here.

If a regression has occurred and you are the assigned CM follow the instructions here.

If this regression could have been avoided please consider also proposing a recommendation to the PR checklist so that we can avoid it in the future.

[Santhosh-Sellavel]

bump @jasperhuangg

[jasperhuangg]

@Santhosh-Sellavel sorry for the delay, #11217 should fix the issue and was just merged