react-dnd / react-dnd

Drag and Drop for React

Home Page:http://react-dnd.github.io/react-dnd

Geek Repo:Geek Repo

Github PK Tool:Github PK Tool

Library breaks textareas, inputs etc.

csigmanek opened this issue · comments

Describe the bug
Usually, you can select a chunk of text in an input or textarea field. Then, you can move it and drop it at another location in the same textarea or input field.
Using this library breaks this default browser behavior.

Reproduction

Live Reproduction
https://codesandbox.io/p/sandbox/brave-browser-kx5ftj?file=%2Fsrc%2Findex.tsx%3A10%2C13

Steps to reproduce the behavior:

  1. Open Chrome
  2. Go to https://codesandbox.io/p/sandbox/brave-browser-kx5ftj?file=%2Fsrc%2Findex.tsx%3A10%2C13
  3. Click on the textarea at the very top, which is outside of the react-dnd stuff
  4. Enter "some custom string or whatever"
  5. Select "string" with your mouse
  6. Try to move "string" with your mouse and try to insert it between "some" and "custom"

Expected behavior
An indicator is shown where the word would be dropped and it can be moved around.

Desktop (please complete the following information):

  • OS: Windows
  • Browser Chrome
  • Version 120.0.6099.63

Same here for the TipTap editor, which uses content editable to support rich text edit. As long as this library is added the drag and drop inside the editor no longer works