Select and drag text in the editor is broken, can recreate this on draftjs.org

[d-turner]

Do you want to request a feature or report a bug?
bug

What is the current behavior?
Select and drag text in the editor is broken, causes unpredictable behaviour.
Can recreate this on draftjs.org
Ubuntu:
Chromium Version 61.0.3163.100
Firefox Version 56.0
Windows:
Chrome

**If the current behavior is a bug, please provide the steps to reproduce and if possible a minimal demo of the problem. You can use this jsfiddle to get started: **

Go to draftjs.org, enter a sentence into the editor, double click the first word to highlight it and drag it to another location in the editor.

The observed result is near different each time and is not what is expected, sometimes the dragged word remains in the original location and in the drop location, sometimes it is placed a few characters after the drop location.

It is tested at https://draftjs.org/

What is the expected behavior?

Move the selected text to the desired caret position.

Which versions of Draft.js, and which browser / OS are affected by this issue? Did this work in previous versions of Draft.js?

It is tested at https://draftjs.org/
Version 0.10.1
Version 0.10.4

[flarnie]

Thanks for reporting this!

I just tried to reproduce it quickly in Chrome on MacOSX, and dragging text worked as expected for me.

Can you provide more info about how to reproduce this? What browser and operating system are you using?

[d-turner]

Thanks for the quick response, I have tried this on Windows Chrome and Ubuntu Chrome and Chromium
Below example is on Ubuntu Chrome Guest Session (No extensions or plugin):
Version 62.0.3202.62 (Official Build) (64-bit)

[flarnie]

Aha - I was testing on Firefox. This is indeed easy to reproduce on Chrome, and what an awful bug! Thanks for reporting it!

I'd love to get a PR fixing it. This seems recent - I'm surprised I didn't catch it when manually testing in the past.

You mentioned being able to reproduce it in 0.10.1 - I wonder if it's a problem introduced by a Chrome version update rather than a change in Draft.

Either way, would be great to get a fix. If nobody picks this up I'll look into it when I have time.

[itssujan]

I tried this on Mac Chrome and seems to be working fine.

[flarnie]

Thanks for commenting @itsujan - I just tried again and was not able to reproduce it. I'm using Chrome 62.0.3202.62.

[itssujan]

👍 Works all good for me too at Version 62.0.3202.75 🍏

[nickpassarella]

I'm actually able to reproduce on OSX Chrome 62.0.3202.75 if I follow the exact steps in @d-turner's clip.

I'm pretty sure this is in the code and not a browser issue.

https://github.com/facebook/draft-js/blob/aca0861e6dd10e921a75aabac9ec0206ae61010a/src/component/handlers/drag/DraftEditorDragHandler.js#L117

It seems dropSelection offsets are determined while the dragged/highlighted content is still in its original location. So if you are dragging and dropping within the same block away from the start, the dropSelection offset is going to be original focusOffset - anchorOffset characters further than you'd expect.

Notice in the above clip that when This (length: 4) is dropped, it ends up being placed 4 characters to the right of where you'd expect it to be. Everything works when dropping into another block, like @flarnie's clip, since the dropSelection's block isn't getting any content removed from it as part of the transaction.

I have a scratch fix working locally, so I can take this and open a PR soon when I can clean it up.

[mitermayer]

@nickpassarella Awesome! Please feel free to submit a PR to this!

[jackyho112]

This one has been sitting here for a while. I'm gonna give this a go if that's cool with everyone. Also, found this bug.

It only happens when you try to drag the selection onto the last line of the multiple selected lines. It may make sense to fix both bugs together.

[flarnie]

Thanks @jackyho112 - it would be great to get a fix in for this.

[hejtmii]

Hi, what is the status of this issue?

I have tried it on 0.11.4 as well as on draftjs.org, and I can still see some problems. In particular when you drag the text forward on the same line, the target index does not subtract the length of the dragged text, placing it much further in the text than it should. When it lands after the end of the text, it even makes the editor content inconsistent.

In addition to that, we drag and drop custom blocks using external drag and drop functionality, and we face an issue that the editor sometimes sets its mode to drag but after drop (not currently sure about how to exactly reproduce it on a simple showcase) doesn't reset it back to the edit mode, leaving the editor in a state which completely stops responding to events.

Is there some way to completely disable drag and drop handling by the editor?

[tobi-or-not]

I am also trying to figure out the status of this issue. As far as I can see, where were pull requests addressing the problem but none of them was accepted. Can anyone help understand how to fix this bug?