[HOLD for payment 2023-09-18] [$500] Chat - Scroll and image click is disabled when composer limit is triggered and we paste more text

@dhanashree-sawant

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:

Open the app
Open report which has image attachment message as latest message or send any image attachment
In composer box, first paste text over 15000 and trigger the limit
Again paste text with 8-10 lines few times in quick succession (8-10 times)
Now try to scroll in the report and observe that scroll is disabled
click on attachment and observe that it displays 'I' cursor and does not open the image

Expected Result:

Scroll and image click should not be disabled on pasting text over limit in compose box

Actual Result:

Scroll and image click is disabled on pasting text over limt and again pasting 8-10 lines text few times in quick succession

Workaround:

Unknown

Platforms:

Which of our officially supported platforms is this issue occurring on?

Version Number: v1.3.61-3

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

scroll.and.image.is.disabled.on.paste.over.15k.mp4

Bandicam.2023-09-02.00-24-13-284.mp4

Expensify/Expensify Issue URL:

Issue reported by: @dhanashree-sawant

Slack conversation: https://expensify.slack.com/archives/C049HHMV9SM/p1693114865802139

View all open jobs on GitHub

Upwork Automation - Do Not Edit

Upwork Job URL: https://www.upwork.com/jobs/~01e6ea16d0f3dcd7de
Upwork Job ID: 1698542225437315072
Last Price Increase: 2023-09-04
Automatic offers:

bernhardoj | Contributor | 26518093

@kadiealexander

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

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

Proposal

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

When we have a very long text in a main composer, we can't scroll the chat except by using the scrollbar, and also a caret is showing while hovering over anything (not specific to the image) on the chat.

What is the root cause of that problem?

On the web, we render an invisible text to calculate a caret position. This is to prepare for the inline suggestion feature.

App/src/components/Composer/index.js

Line 480 in 9701fbe

{shouldCalculateCaretPosition && renderElementForCaretPosition}

App/src/components/Composer/index.js

Lines 412 to 420 in 9701fbe

    
           const renderElementForCaretPosition = ( 
        
               <View 
        
                   style={{ 
        
                       position: 'absolute', 
        
                       bottom: -2000, 
        
                       zIndex: -1, 
        
                       opacity: 0, 
        
                   }} 
        
               >

When the text is very long, the invisible text will cover up the chat screen causing the caret cursor to show. Here is how it looks with opacity set to 1.

This is because we set the bottom to be -2000. When the invisible text height is more than 2000, it will start to cover up the chat screen.

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

Remove the bottom positioning. This will let the invisible text height grow infinitely with the direction to the bottom.

Alternatively, I think we can position the invisible text to be out of the screen horizontally by setting left to -9999 for example. It won't matter how big is the height.

Reproduced:

2023-09-04_15-39-40.mp4

Notes:

You can scroll using the scrollbar, or using your mouse wheel when the cursor is outside the message containers, but not when your cursor is inside a message
You can't open images, toggle tasks, or interact with the on-hover menu or add reacjis

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

@kadiealexander

Current assignee @kadiealexander is eligible for the External assigner, not assigning anyone new.

@narefyev91

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

@bernhardoj

Proposal from @bernhardoj looks good to me - we should fix that - because user may loose ability to interact with items on the page
🎀 👀 🎀 C+ reviewed

@dhanashree-sawant

Payouts due:

Issue Reporter: $50 @dhanashree-sawant
Contributor: $500 @bernhardoj

Eligible for 50% #urgency bonus? No

Upwork job is here.

@dhanashree-sawant

@dhanashree-sawant could you please apply in Upwork?

@narefyev91 please complete the checklist when you next get a chance!

The PR is delayed because of the merge freeze. Is it possible to ignore the merge freeze delay?

@kadiealexander

Hi @kadiealexander, if possible can you send me offer to the job?

The PR that introduced the bug has been identified. Link to the PR: Caret position on WEB #17331
The offending PR has been commented on, pointing out the bug it caused and why, so the author and reviewers can learn from the mistake. Link to comment: https://github.com/Expensify/App/pull/17331/files#r1331322344
A discussion in #expensify-bugs has been started about whether any other steps should be taken (e.g. updating the PR review checklist) in order to catch this type of bug sooner. Link to discussion N/A
Determine if we should create a regression test for this bug - I think to be sure that we a good to go - let's have this test steps:

Regression Testing

Open any chat
Type a very long text that exceeds the max length of the composer (text is provided below)
Move over your mouse to the center of the chat screen (web/desktop)
Verify the cursor is not a caret (web/desktop)
Verify you can scroll the chat using either the mouse wheel/trackpad (web/desktop) or by touch (mWeb/Android/iOS)
Verify you can click on anything

@kadiealexander

@kadiealexander All yours when you get the chance!

@dhanashree-sawant

@dhanashree-sawant please let me know when you've accepted my offer.

@kadiealexander

Thanks @kadiealexander, I have accepted the offer.

Navigation Menu

Repository navigation

[HOLD for payment 2023-09-18] [$500] Chat - Scroll and image click is disabled when composer limit is triggered and we paste more text #26535

Action Performed:

Expected Result:

Actual Result:

Workaround:

Platforms:

Bug0 Triage Checklist (Main S/O)

Proposal

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

What is the root cause of that problem?

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

21 remaining items

Metadata

Assignees

Labels

Type

Projects

Milestone

Relationships

Development

	const renderElementForCaretPosition = (
	<View
	style={{
	position: 'absolute',
	bottom: -2000,
	zIndex: -1,
	opacity: 0,
	}}
	>

[HOLD for payment 2023-09-18] [$500] Chat - Scroll and image click is disabled when composer limit is triggered and we paste more text #26535

Description

Action Performed:

Expected Result:

Actual Result:

Workaround:

Platforms:

Activity

melvin-bot commented on Sep 1, 2023

melvin-bot commented on Sep 1, 2023

Bug0 Triage Checklist (Main S/O)

bernhardoj commented on Sep 2, 2023

Proposal

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

What is the root cause of that problem?

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

kadiealexander commented on Sep 4, 2023

melvin-bot commented on Sep 4, 2023

melvin-bot commented on Sep 4, 2023

melvin-bot commented on Sep 4, 2023

narefyev91 commented on Sep 4, 2023

21 remaining items

kadiealexander commented on Sep 20, 2023

kadiealexander commented on Sep 20, 2023

bernhardoj commented on Sep 20, 2023

dhanashree-sawant commented on Sep 20, 2023

narefyev91 commented on Sep 20, 2023

pecanoro commented on Sep 22, 2023

kadiealexander commented on Sep 25, 2023

dhanashree-sawant commented on Sep 25, 2023

Metadata

Metadata

Assignees

Labels

Type

Projects

Milestone

Relationships

Development

Issue actions