[$500] Chat - Text partially cut for last text on paste of long text

[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. Open the app
2. Open any report
3. Type in multiline text which just triggers scroll and copy it or copy similar length text from any other source
4. Paste it in composer and observe that last line text is displayed partially cut

Expected Result:

App should scroll to bottom to ensure that pasted text is displayed fully

Actual Result:

App should scroll to bottom to ensure that pasted text is displayed fully

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.77.5
Reproducible in staging?: y
Reproducible in production?: y
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

mac.desktop.paste.scroll.half.text.mov

mac.chrome.paste.scroll.half.text.mov

windows.chrome.partially.cut.text.on.paste.mp4

Recording.4853.mp4

Expensify/Expensify Issue URL:
Issue reported by: @dhanashree-sawant
Slack conversation: https://expensify.slack.com/archives/C049HHMV9SM/p1696347080023239

View all open jobs on GitHub

Upwork Automation - Do Not Edit

• Upwork Job URL: https://www.upwork.com/jobs/~01f1d1d117c4970023
• Upwork Job ID: 1709626352655679488
• Last Price Increase: 2023-10-11

[melvin-bot]

Job added to Upwork: https://www.upwork.com/jobs/~01f1d1d117c4970023

[melvin-bot]

Triggered auto assignment to @lschurr (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

[melvin-bot]

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

[saiKumarGanji]

Proposal

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

On paste of long text which just triggers scroll, the text is getting partially cut, instead of displaying until the bottom

What is the root cause of that problem?

The textarea element on paste is not scrolling entirely down, which results in partial text cut

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

When we copy into textarea, we can catch the copy event and set the textarea scroll to the bottom using js dom methods

What alternative solutions did you explore? (Optional)

NA

[nebiyuelias1]

Proposal

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

When pasting a very long text, the composer is not scrolled all the way to the bottom. It's scrolled partially. But it seems this happens only for edge cases. If the text is substantially long it's scrolled fully.

What is the root cause of that problem?

It seems the Composer was refactored into a FC with this PR. Inside the updateNumberOfLines function. It seems the author used a workaround of setting height to 0 first and then to auto, and it seems it's having a jumping effect. But it doesn't guarantee it will be scrolled all the way.

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

To ensure it's scrolled all the way to the bottom we can include something like the following inside the updateNumberOfLines function to make sure it will always be scrolled all the way to the bottom:
textInput.current.scrollTop = textInput.current.scrollHeight;

What alternative solutions did you explore? (Optional)

[hoangzinh]

I gonna review current proposals today.

[hoangzinh]

@saiKumarGanji @nebiyuelias1 Thanks for your proposals. I don't think it's correct. Your proposal could lead to a regression bug where a user is typing somewhere in the middle of the composer, and tries to copy and paste something then it would scroll to the end of the composer instead of staying focused in the end of pasting text.