search

bvaughn / react-window

React components for efficiently rendering large lists and tabular data
https://react-window.now.sh/
MIT License
15.48k stars 778 forks source link

Highlighting text while scrolling does not work #732

Open robkozura opened 11 months ago

robkozura commented 11 months ago

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 commented 11 months ago

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 commented 11 months ago

@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 commented 11 months ago

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 😅