0

I implemented a draggable textarea using react-rnd by having the textarea component inside of the react-rnd component. Now when I try to select the text inside the textarea by using the cursor and if I accidentally go out of the react-rnd component, the selection changes.

The problem is illustrated in the gif image below. Here, I try to select the text from 'o' and go in the reverse direction and when I go out of the textbox, the selection changes and everything after that 'o' letter is selected. How to retain the original selection 'hello' in this case even when I go out of the react-rnd component.

enter image description here

The problem does not occur if I take the textarea out of the draggable component. I am struck with this issue for more than 2 days and I am yet to find a solution for this.

I created the replica of my issue in the below codesandbox.

https://codesandbox.io/s/lucid-sky-bl33e?file=/src/App.js

sundar sundar
  • 41
  • 4

1 Answers1

0

Since the there is a problem in user selection, You can add a copy or select the text button for that text area.

See the following website for implementing that button: https://www.w3schools.com/howto/tryit.asp?filename=tryhow_js_copy_clipboard

Wajid Areeb
  • 1
  • The issue is I would like to select text by dragging and that the selection must not change when I move out of the input box. – sundar sundar Sep 22 '21 at 12:23