Chrome cursor behavior change during drag and drop

[bmoquist]

My application uses React Konva for drag and drop with images and rects. Redux manages objects' static positions on the stage and stores an object's position during the dragEnd call.

When dragging and dropping in Chrome, I’m often getting a change in cursor behavior and appearance. The following copy cursor with document icon appears at dragStart and lasts until dragEnd is completed:

When this occurs and the mouse pressed down (as during normal DnD), the Konva object does not move (even though the cursor does). Upon mouse up, the object jumps to the current cursor position and sticks to cursor (even if the cursor continues to move and the mouse is up). When the mouse is pressed again, the object is dropped.

This behavior does not occur initially at page load. An object initially drags as expected but repeated drag and drops of the same or different objects eventually result in the behavior.

The expected behavior is to press and hold the mouse on the object and release the object in a new position when the mouse is released. Both Firefox and Safari work as expected.

I’ve placed evt.evt.preventDefault(); in the handleDragStart, handleDrag, and handleDragEnd methods called by the onDragStart, onDragMove, and onDragEnd Konva events. This has not fixed the behavior.

This React DnD issue appears similar:

react-dnd/react-dnd#414

It suggests changing the following event properties :

event.dataTransfer.dropEffect = 'none'
event.dataTransfer.effectAllowed = 'none'

Looking at the Konva event, the dataTransfer property does not appear accessible.

Anyone observed or overcome this problem? Any suggestions on how to proceed would be appreciated.

Chrome: Version 69.0.3497.100 (Official Build) (64-bit)

NPM:
react: 16.5.1
konva: 2.3.0
react-konva: 1.7.15

[lavrton]

evt.preventDefault(); is called automatically on all drag events. Is it possible to create a small reproducible demo?

[bmoquist]

Thanks for the response, Anton. I created a demo here:

https://github.com/bmoquist/konva-dnd-chrome-issue

In the process, I found that the issue relates to double clicking on a Konva object while in Chrome and then trying to drag it. The double click on the object often triggers a select action outside of the Stage that then changes the cursor and drag and drop behavior. The select action was barely noticeable so I missed it in my app - see the demo example below where the period is highlighted.

Deselecting the newly selected text outside of Konva returns the stage and its objects to normal expected drag and drop behavior.

Neither Firefox nor Safari seem to produce this selection behavior on double click.

The double click isn't critical to my app so I can remove it and avoid the troubles above unless you have any suggestions for an easy fix.

Note: If you use the demo, there is an unrelated rendering issue during rotation where both the prior and newly rotated version of the image are visible until the image is dragged that I didn't bother to fix. It's not related to the issue discussed above.

[lavrton]

Good issue. I am thinking about the solution. As a workaround you can set this CSS to stage container:

user-select: none;

[lavrton]

I think I will add user-select: none; to stage container by default. There is a case when we shouldn't call evt.preventDefault() on mousedown. Doing that will make drag&drop function worce inside iframes. Adding that style will fix your issue.

[lavrton]

released. You may try it.

[bmoquist]

Works perfectly - thanks much!