[BUG] None of the drag events work in dialogs except `dragstart`

Photoshop
, , ,
1

I’ve spent 2 days trying to figure out what’s wrong… Only dragstart fires and none of the other events do. What I’ve found, all events fire while on a panel, but only dragstart while on a dialog :confused:

Here’s the simplest React Component to try:

import { DragEvent, useCallback } from "react"

const SortableTest = () => {
    const onDragEnter = useCallback((e) => {
        console.log("onDragEnter: ", e)
        e.stopPropagation()
        e.preventDefault()

        return false
    }, [])

    const onDragOver = useCallback((e) => {
        console.log("onDragOver: ", e)
        e.preventDefault()
        e.stopPropagation()

        return false
    }, [])

    const onDragLeave = useCallback((e) => {
        console.log("onDragLeave: ", e)
        e.stopPropagation()
        e.preventDefault()

        return false
    }, [])

    const onDrop = useCallback((e) => {
        console.log("onDrop: ", e)
        e.preventDefault()

        return false
    }, [])

    const onDragStart = useCallback((e) => {
        console.log("onDragStart: ", e)
        e.preventDefault()
        e.dataTransfer.effectAllowed = "move"
        e.dataTransfer.dropEffect = "move"

        return false
    }, [])

    return <div style={{padding: "1em", margin:"1em"}}>
        {["a", "b", "c"].map((id) => {
            return <div
                draggable={true}
                key={`_${id}`}
                onDragStart={onDragStart}
                onDragLeave={onDragLeave}
                // onDragEnter={onDragEnter}
                // onDragOver={onDragOver}
                // onDrop={onDrop}
                style={{ padding: "0.5em", margin: "0.5em", fontSize: "1em", backgroundColor: "grey" }}
            >
                Drag me
            </div>
        })}
    </div>
}

export default SortableTest

Render it on a panel and all is fine. Render on a dialog and only dragstart is fine :frowning:

1 Like