[HOLD 33725][$500] Web - Chat - Two Messages can not be selected when they are divided by reply

[lanitochka17]

If you haven’t already, check out our contributing guidelines for onboarding and email contributors@expensify.com to request to join our Slack channel!

---

Version Number: 1.4.37-0
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): gocemate@gmail.com
Logs: https://stackoverflow.com/c/expensify/questions/4856
Expensify/Expensify Issue URL:
Issue reported by: Applause - Internal Team
Slack conversation:

Action Performed:

1. Navigate to staging.new.expensify.com
2. Go to any chat
3. Send a message
4. Add a reply to the message
5. Send another message
6. With mouse select last message and continue to select first message with reply

Expected Result:

Messages should be selected in a consistent manner where there is no 'jumping' or 'flashing' of the highlighted area. The highlighted area shouldn't be disrupted by 'reply to threads' in the chat.

Actual Result:

The highlighted area is no consistently selected when you drag the curser over it.

Workaround:

Unknown

Platforms:

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

• Android: Native
• Android: mWeb Chrome
• iOS: Native
• iOS: mWeb Safari
• MacOS: Chrome / Safari
• MacOS: Desktop

Screenshots/Videos

Add any screenshot/video evidence

Bug6369709_1707245548612.Recording__2115.mp4

View all open jobs on GitHub

Upwork Automation - Do Not Edit

• Upwork Job URL: https://www.upwork.com/jobs/~0135be761efeca8eb4
• Upwork Job ID: 1754943044230656000
• Last Price Increase: 2024-02-27

[melvin-bot]

Job added to Upwork: https://www.upwork.com/jobs/~0135be761efeca8eb4

[melvin-bot]

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

[melvin-bot]

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

[lanitochka17]

We think that this bug might be related to #vip-vsp
CC @quinthar

[Christinadobrzyn]

testing this, sometimes you can highlight the chat. So I don't know if we want to fix this now - asking https://expensify.slack.com/archives/C066HJM2CAZ/p1707253470143849

2024-02-06_13-56-16.mp4

[Christinadobrzyn]

I think we can broaden the scope of this OP to allow for users to highlight an entire chat thread regardless of breaks in the chat - asking the team for a review - https://expensify.slack.com/archives/C066HJM2CAZ/p1707429247200849

[mananjadhav]

@Christinadobrzyn Any updates on the discussion? I can't access the slack thread.

[Christinadobrzyn]

no response from the team yet, I'll keep monitoring our decision

[melvin-bot]

📣 It's been a week! Do we have any satisfactory proposals yet? Do we need to adjust the bounty for this issue? 💸

[Christinadobrzyn]

Gonna try the BZ room to see if I can get an answer - https://expensify.slack.com/archives/C01SKUP7QR0/p1707868596042429

Also asking QA if they know what is expected here - https://expensify.slack.com/archives/C9YU7BX5M/p1707868718740389

[Christinadobrzyn]

Talking this over with QA @isagoico we both agree this should be fixed to mimic the highlight abilities of Slack or GH

Expected behaviour:

You should be able to highlight an entire 'area' of a chat without it glitching or being disrupted by a 'reply to chat thread'.

So the behaviour should be more like this:

2024-02-14_09-14-34.mp4

instead of how it is now where the highlighted area 'jumps' around and isn't consistent.

2024-02-14_09-16-13.mp4

Let me know your thoughts @mananjadhav

[Santhosh-Sellavel]

@Christinadobrzyn I think you meant @mananjadhav

[mananjadhav]

Okay I get what you mean @Christinadobrzyn. This is now open for proposals.

[brandonhenry]

Proposal

Problem Statement

The issue at hand is that text selection within the chat messages is being reset when trying to copy the text of an entire chat thread

Root Cause

The root cause of this problem is our use of InvertedFlatList here.

Changing this to FlatList fixes the issue. This is odd considering our InvertedFlatList is just a FlatList under the hood, so I took a look at the BaseInvertedFlatList implementation and found that the root cause is without a doubt the inverted flag used on the FlatList object here

Screen.Recording.2024-02-28.at.9.39.32.PM.mov

Proposed Solution

To address this issue, we should stop using InvertedFlatList since the inverted property of a FlatList is causing weird issues with selection.

Instead, let's just use a normal FlatList and mimic the inverted styling that happens when passing in that property.

We can reverse the ordering of the flatlist items (sortedReportActions.reverse()) and also apply the same style that the FlatList would apply if we add inverted to it. That style is style={{transform: [{scaleY: -1}]}}. We should add that here

(See FlatList React Native Documentation)

These changes fix the issue as you can see in my recording. This may not be the most optimal solution but I do believe I'm on the right path.

Screen.Recording.2024-02-28.at.10.01.41.PM.mov

As these are no minor changes, and could have other implications (also took quite awhile to finally uncover) - i propose the bounty be raised on this ticket

[melvin-bot]

@mananjadhav @Christinadobrzyn this issue was created 2 weeks ago. Are we close to approving a proposal? If not, what's blocking us from getting this issue assigned? Don't hesitate to create a thread in #expensify-open-source to align faster in real time. Thanks!

[Christinadobrzyn]

Thanks @mananjadhav! We're accepting and reviewing proprosals

[melvin-bot]

📣 It's been a week! Do we have any satisfactory proposals yet? Do we need to adjust the bounty for this issue? 💸

[Victor-Nyagudi]

This one's tricky.

First, the text with the reply count in between messages is not meant to be selected or copied because of these lines. Both have styles.userSelectNone.

App/src/pages/home/report/ReportActionItemThread.tsx

Lines 61 to 64 in 20ca041

	<Text
	style={[styles.link, styles.ml2, styles.h4, styles.noWrap, styles.userSelectNone]}
	dataSet={{[CONST.SELECTION_SCRAPER_HIDDEN_ELEMENT]: true}}
	>

App/src/pages/home/report/ReportActionItemThread.tsx

Lines 67 to 71 in 20ca041

	<Text
	numberOfLines={1}
	style={[styles.ml2, styles.textMicroSupporting, styles.flex1, styles.userSelectNone]}
	dataSet={{[CONST.SELECTION_SCRAPER_HIDDEN_ELEMENT]: true}}
	>

The dataSet value is used to remove them from the clipboard content in SelectionScraper.

App/src/libs/SelectionScraper/index.ts

Lines 91 to 97 in 20ca041

	const divsToRemove = div.querySelectorAll(`[data-${CONST.SELECTION_SCRAPER_HIDDEN_ELEMENT}=true]`);
	if (divsToRemove && divsToRemove.length > 0) {
	divsToRemove.forEach((element) => {
	element.remove();
	});
	}

This pattern has been used in multiple places in the code base e.g. #26694.

Secondly, if you inspect the HTML, you'll notice that the divs housing the different messages are arranged in reverse i.e. message 2 div is below message 1, but the messages rendered on the page are in the correct order.

After tinkering a bit on codepen, I found that even if there's a div or button in between that shouldn't be selected, you should still be able to select everything else just fine.

All that being said, I believe the order in which the messages are rendered or the HTML produced could be interfering with the selection behavior - unless maybe this worked at some point and is now broken.

I thought about changing the message order or playing around with how the HTML is generated, but I felt like this could have some unintended side effects.

Either way, I'm letting this one go, so hopefully this provides some context to the next person who decides to take a crack at it.

[Christinadobrzyn]

hi @mananjadhav could you take a peek at the proposals we have so far? Thanks!

[Christinadobrzyn]

HOLD for #33725

[brandonhenry]

Just leaving a note here that we will need to constantly push on the react-native ticket in order for this to move 👍🏿

[Christinadobrzyn]

Just checking in here, @mananjadhav can you provide an update? I'm a little lost where we are here. Can you also confirm if this should stay on hold? #37447

[Christinadobrzyn]

this is on hold for - #33725

[Christinadobrzyn]

This is still on hold for - #33725

I do think this still needs to be fixed

[Christinadobrzyn]

This is still on hold for - #33725

[Christinadobrzyn]

@mananjadhav do you think we're still on hold for #33725?

I just retested and this is still happening

[mananjadhav]

Yes . We're still held on the linked issue.

[Christinadobrzyn]

On hold for - #33725

[Christinadobrzyn]

On hold for - #33725

[Christinadobrzyn]

Hey @mananjadhav does this still need to be on hold for #33725?

[Christinadobrzyn]

on hold for #33725

Just a heads up - I'm going to be ooo until June 24th. I'm not going to assign anyone new but if you need a new BZ teammate for any reason please feel free to ask for one to be assigned here.

[Christinadobrzyn]

on hold for #33725

[Christinadobrzyn]

on hold for #33725

[Christinadobrzyn]

on hold for #33725

[Christinadobrzyn]

on hold for #33725

[Christinadobrzyn]

still on hold for #33725