[HOLD on #3381] Selecting, copying, and pasting text on web and desktop are weird and in inverted order

[puneetlath]

If you haven’t already, check out our contributing guidelines for onboarding!

---

Upwork job: https://www.upwork.com/jobs/~0195a298f26a002c08

NOTE: We are only looking for proposals on fixing this directly in https://github.com/facebook/react-native. Example issue addressing this accessibility issue facebook/react-native#30373
We are not looking for a work-around in our repo

Platform - version:
Web and Desktop.

Action Performed (reproducible steps):
Attempt to select text across multiple chat inputs. You will find that it is difficult to select text across multiple chat inputs. Then, once you have managed to select multiple lines of text, try pasting that text. You will find that the order of the text has been inverted.

Expected Result:
That it would be easy to select text across chat inputs and that when copying and pasting the text it would retain itss order.

Actual Result:
The text is difficult to select and pastes in inverted order.

Notes/Photos/Videos:

We use Flatlist for rendering the list of chat messages. We use the inverted prop which reverses the scroll direction on mobile. We then use react-native-web for web and desktop. The ideal solution would fix this upstream, either in React Native or react-native-web. You can see an example of the problem here: https://codesandbox.io/s/cold-wave-grzpj?file=/src/App.js

[parasharrajat]

So I did some digging. The issue is that inverted Flatlist uses transform:scale(-1) for inversion but the Browser selection works based on the order of dom elements. Even if we change the Flatlist code to use flex-direction:column-reverse the problem will remain same as the order of dom element is still reversed.

[puneetlath]

@parasharrajat can you think of a way FlatList could implement this functionality that wouldn't require inverting the order of the dom elements?

[puneetlath]

@anthony-hull pointed out that this also creates an accessibility issue: facebook/react-native#30373

[parasharrajat]

@puneetlath This issue is not with the FlatList. It is just a wrapper but more of the VirtualizedList and ScrollView underneath. And this is not really an accessibility issue. FlatList is made for the purpose of mobile devices so inversion logic is correct. Why would they create two-dimensional renderings if they do not need to? So they are not fixing this issue. It's been there for years now.

Yeah. I was suggesting using a non-inverted FlatList. I have a plan but first I need to give it a go. I think it is possible to show the chats with the non-inverted list. I have found some supporting evidence for my plan. I will soon let you in few hours.

[marcaaron]

Gonna add this context here since @joaniew brought to our attention another bug related to this. I have a strong suspicion it is related to the FlatList CSS issues (if not the same exact issue) so whenever we fix this we should make sure to check whether this is resolved as well.

When copying text from Expensify.cash and pasting into gmail we see this:

[mallenexpensify]

cc @tgolen so you can follow along

[henrymoulton]

Howdy, I'm a React Native contractor/freelancer currently at Amazon, looking to do a few small fixed price things in my spare time. This might end up being too deep of a rabbit hole for me to work on, so I apologise in advance if that's the case.

I think this format of open source core + contract work to solve issues is super cool.

I looked through the issues and source code of the react-native-web FlatList/VirtualizedList.

My current conclusion is that the approach to inversion inside React Native is pretty broken, affecting scroll + text highlight + A11y.

Like @parasharrajat says:

I was suggesting using a non-inverted FlatList.

I have a screenshot showing that below, but appreciate the outcome you probably want is a React Native fork which would change the inverted implementation?

[mallenexpensify]

Thanks for taking a look @henrymoulton

the outcome you probably want is a React Native fork which would change the inverted implementation?

Yes, we're hoping for a React Native fork so that we can fix the issue for ourselves as well as everyone else!
Do you think this is something you'd be able to invest the time in to fix?
If not, we have many other smaller jobs on Upwork - link.

[iwiznia]

My current conclusion is that the approach to inversion inside React Native is pretty broken, affecting scroll + text highlight + A11y.

heh, that were my impressions too when I looked at this 😄

To clarify, ideally the fix would be merged into the react native code base. So it would be good to also check with the maintainers that the proposed solution is good for them (once we review it here).

[ahmedjamshed001]

This issue can be resolved by using modified FlatList component here

https://codesandbox.io/s/musing-rubin-tti3o