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

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 https://github.com/facebook/react-native/issues/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

[mallenexpensify]

@puneetlath Nirav in Upwork proposed

I have reverse order of data instead of element I had to do change on the other three screens as I have changed the data order in the element that change is removed inverted from component and changed y position

https://user-images.githubusercontent.com/22508304/114251545-4479c400-9956-11eb-9726-50af816461fb.mov

Can you provide some feedback to share with Nirav?

[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).