While selecting text inside a react-rnd goes out of the draggable component, the selection changes

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.

reactrnd

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.

This topic was automatically closed 182 days after the last reply. New replies are no longer allowed.