[$250] mWeb/Chrome - Text Insertion point goes out of the sight on typing in the middle of the paragraph - reported by @Tushu17

[mvtglobally]

If you haven’t already, check out our contributing guidelines for onboarding and email [email protected] to request to join our Slack channel!

---

Action Performed:

1. Go Chat
2. Write 10-12 line text
3. Type some words on the 4th-5th line.

Expected Result:

Text insertion point should remain at a constant position.

Actual Result:

It kept moving in and out of sight.

Workaround:

unknown.

Platform:

Where is this issue occurring?

• Mobile Web (Chrome)

Version Number: 1.1.49-0
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_20220310-222501_Chrome.1.mp4

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

View all open jobs on GitHub

[melvin-bot]

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

[melvin-bot]

@cdraeger11 Whoops! This issue is 2 days overdue. Let's get this updated quick!

[melvin-bot]

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

[melvin-bot]

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

[kadiealexander]

Posted to Upwork!
https://www.upwork.com/jobs/~01506330c899546260
https://www.upwork.com/ab/applicants/1517324288985792512/job-details

[melvin-bot]

Triggered auto assignment to Contributor-plus team member for initial proposal review - @parasharrajat (Exported)

[melvin-bot]

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

[b1tjoy]

Proposal

Reason

When the text changed in TextInput, the updateComment callback function is called, and in the last line of the function we always set scollTop to scrollHeight, which means always scoll to the last of TextInput, this is why the insertion point goes out of the sight.

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

Lines 304 to 327 in 0fb59f5

	updateComment(newComment) {
	this.textInput.setNativeProps({text: newComment});
	this.setState({
	isCommentEmpty: newComment.trim().length === 0,
	});
	// Indicate that draft has been created.
	if (this.comment.length === 0 && newComment.length !== 0) {
	Report.setReportWithDraft(this.props.reportID.toString(), true);
	}
	// The draft has been deleted.
	if (newComment.length === 0) {
	Report.setReportWithDraft(this.props.reportID.toString(), false);
	}
	this.comment = newComment;
	this.debouncedSaveReportComment(newComment);
	if (newComment) {
	this.debouncedBroadcastUserIsTyping();
	}
	this.textInput.scrollTop = this.textInput.scrollHeight;
	}

And I checked the submit history of ReportActionCompose.js
Pull #7369 add the code

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

Line 326 in 0fb59f5

this.textInput.scrollTop = this.textInput.scrollHeight;

to solve issue #7351, but cause our current issue, the right way to fix issue #7351 is to call TextInput focus() at last of updateComment callback, not just set scroll to the last of TextInput.

Solution

Modify this line

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

Line 326 in 0fb59f5

this.textInput.scrollTop = this.textInput.scrollHeight;

to

this.textInput.focus();

will fix both issue #7351 and the current issue.

I will upload screenshot lately.

[pecanoro]

Sounds good! Assigning @b1tjoy to the issue! Don't forget to apply in Upwork

[melvin-bot]

📣 @b1tjoy You have been assigned to this job by @pecanoro!
Please apply to this job in Upwork and leave a comment on the Github issue letting us know when we can expect a PR to be ready for review 🧑‍💻
Keep in mind: Code of Conduct | Contributing 📖

[kadiealexander]

@b1tjoy please let me know your upwork username so I can hire you for the job. :)

Offers sent to @parasharrajat for C+ and @Tushu17 for reporting.

[Tushu17]

Offer accepted👍

[b1tjoy]

@b1tjoy please let me know your upwork username so I can hire you for the job. :)

Took me some time to figure what my upwork username is, but i still don't know, can I submit a proposal on upwork?

I have issue with screenshot on Android simulator, I will take screenshot on real device and make pull request less than 24 hours.

[kadiealexander]

@b1tjoy I recieved and accepted your upwork proposal, thank you!

[kadiealexander]

Discussions happening in the PR, not overdue.

[kadiealexander]

@parasharrajat and @b1tjoy could you please share an update here?

[parasharrajat]

I have to do some research for moving ahead with the PR. We are looking for better solution.

[kadiealexander]

@parasharrajat how's your research going?

[parasharrajat]

Updates on the PR. We are moving ahead.

[parasharrajat]

Shared an update on PR.

[kadiealexander]

Not overdue, updates in PR.

[melvin-bot]

@pecanoro @kadiealexander Be sure to fill out the Contact List!

[Tushu17]

The payment is pending here.
cc: @kadiealexander

[kadiealexander]

Sorry for the confusion there! Have opened and will pay after the regression period.

@pecanoro please don't close these issues until the payment is issued.

[kadiealexander]

Everyone is paid! Thanks team :)