Highlighting text while scrolling does not work

[robkozura]

Hello,

I was wondering if anyone ran across this issue where highlighting text (for copy/paste) while scrolling does not work. I understand that react-window is removing elements from the DOM while scrolling, however if the overscan value is high enough, those elements are actually still on the page (albeit out of view).

Anyone have a work around? You can see this problem happen even with the example application: https://react-window.vercel.app/#/examples/list/variable-size

[cvvkshcv]

I hope this will help: https://codesandbox.io/s/magical-hellman-j9jvnd?file=/src/App.js

Approach:

1. Added 'div' as wrapper and added onKeyDown event.
2. Whenever there is a text selection, store the text in a variable
3. If Ctrl + c is clicked preventDefault behavior and use the stored text and put it inside the clipboard (Added stackoverflow link in codesandbox)

Note:

1. Make sure you handle Mac (Cmd + c) scenario
2. Check any other corner cases

Cheers @robkozura ✌️
-Vikash

[robkozura]

@cvvkshcv Thank you for the suggestion, but it doesn't seem to do the trick, at least in Chrome and FF.

To be clear, the only text I want to select is within the scrolling window. If there are 100 rows, and the react-window height only shows 5 at a time, I want to be able to highlight text from row 0 and copy text from 0-99 by scrolling down.

[gmaxlev]

By default, react-windows adds pointer-events: none while scrolling to the styles, so you can't highlight text. Try to override that property, but I guess you'll face new challenges because there were some reasons to add it 😅