modifying styles during dragstart handler causes Chrome to fire dragend immediately on start

EDIT: not actually unique to captureDraggingState. It’s for any CSS change applied while dragstart is still being handled.

https://bugs.chromium.org/p/chromium/issues/detail?id=168544

Workaround

Make any changes that cause style changes (e.g. firing actions that cause a class to be applied…) in a setTimeout(() => {}, 0) wrapper.

Describe the bug

Usually with the HTML5 backend, one 'dragstart' event fires when you drag something, and one 'dragend' fires when you drop it.

Now, in Chrome, at least in v67, when you have captureDraggingState: true, this is messed up. It goes:

• mouse down to drag an item, move it;
  • 'dragstart'
  • 'dragend' immediately after that
• later, drop the item:
  • no events fire

Because of this, you can’t actually drag anything – it is immediately dropped. Workaround is to drop IE11 DragLayer support by using the default value, false.

To Reproduce Steps to reproduce the behavior:

1. On any example drag source, run connectDragPreviewwith{ captureDraggingState: true }` as its options.
2. Using Chrome dev tools, run monitorEvents(document.body, 'dragstart') and monitorEvents(document.body, 'dragend').
3. Try to drag the source.
4. Watch the console output.
5. Also, observe that nothing happens under your mouse cursor, the drag barely happens at all.

Expected behavior

There should be no 'dragend' until you drop, and you should be able to drag things.

Desktop (please complete the following information):

• OS: Windows 10
• Browser Chrome
• Version 67

It works fine in Firefox 60 on Windows.

Additional context

Technically I am using angular-skyhook, but the code responsible for passing an Element/Node through to a backend with options is almost identical, even slightly simpler with no need for wrapConnectorHooks:

• https://github.com/cormacrelf/angular-skyhook/blob/master/packages/angular-skyhook/src/internal/createSourceConnector.ts
• https://github.com/react-dnd/react-dnd/blob/master/packages/react-dnd/src/createSourceConnector.ts

[Pavel910]

@cormacrelf I ran into this problem today, in my case I have a list of draggable items (like a drawer with items), and when I start dragging I hide the drawer via CSS - at this point dragend fires and breaks dragging.

I managed to bypass this behavior by using setTimeout to update CSS. It’s an ugly hack but solved my problem until a real fix lands.

[Chetan11-dev]

Code Example

   useEffect(() => {
        if (isDragging) {
            setTimeout(() => {
                ref.current!.style.display = 'none'
            }, 0)
        }
    }, [isDragging])


    return (
        <div ref={ref} className={classNames('side-panel left-0', Classes['left-side-panel'])}>
            {ChildrenComponent}
        </div>
    )