react-grid-layout: `onDragStart` triggered on item click but `onDragEnd` Doesn't

As stated in my previous comment, there is an actual bug here, regardless of the decision behind the callback issue in the title.

I found this due to the same problem, however I think the solution is a lot easier than above.

   const handleDragStart = useCallback((layout, oldItem, newItem, placeholder, e) => {
        window.addEventListener('mouseup', handleDragEnd);
        // rest of the code
    }, []);

    const handleDragEnd = useCallback(() => {
        window.removeEventListener('mouseup', handleDragEnd);
    }, []);

Same here. My workaround is to set another event handler on handle’s onClick, in which I set isDragging = false. I think the issue is not directly related to react-grid-layout lib, but rather react-draggable

Nice. I came to a similar workaround, just using onDrag and onDragStop. In my case, I’m using it to prevent clicks on links when dragging so a user doesn’t accidentally open a link when they are trying to rearrange the grid.

1. Declare isDragging state const [isDragging, setIsDragging] = useState(false);
2. Create handlers for onDrag and onDragStop. Conditional in handleDrag is to ensure it is not called continually

const handleDrag = () => {
    if (!isDragging) {
        setIsDragging(true);
    }
}

const handleDragStop = () => {
    setIsDragging(false);
}

1. Use useEffect to do the work

useEffect(() => {
    if (isDragging) {
        // Do one thing
    }
    else {
        // Do a different thing
    }
}, [isDragging]);

This is way clearer than what I was doing, thanks!

Same here. My workaround is to set another event handler on handle’s onClick, in which I set isDragging = false. I think the issue is not directly related to react-grid-layout lib, but rather react-draggable

Nice. I came to a similar workaround, just using onDrag and onDragStop. In my case, I’m using it to prevent clicks on links when dragging so a user doesn’t accidentally open a link when they are trying to rearrange the grid.

1. Declare isDragging state const [isDragging, setIsDragging] = useState(false);

2. Create handlers for onDrag and onDragStop. Conditional in handleDrag is to ensure it is not called continually

const handleDrag = () => {
    if (!isDragging) {
        setIsDragging(true);
    }
}

const handleDragStop = () => {
    setIsDragging(false);
}

1. Use useEffect to do the work

useEffect(() => {
    if (isDragging) {
        // Do one thing
    }
    else {
        // Do a different thing
    }
}, [isDragging]);