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

[Ilaiwi]

When implementing the onDragStart and onDragEnd. A click on an item (not an actual drag) would trigger onDragStart but doesn't trigger onDragEnd.

Please check this gif

I am not sure if the fix here would require not triggering onDragStart on click or triggering onDragEnd after the click is done.

reproduce steps

1- https://codesandbox.io/s/zealous-drake-q3ube?file=/src/ShowcaseLayout.js:1923-1932
2- click on an item and check the logs

[nathanetech]

I'm also running into this.

[ContiGabriel]

Weird, I am not getting this behaviour

[dseliukov]

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

[nathanetech]

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]);

[dseliukov]

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!

[buggedcom]

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);
    }, []);

[agg23]

Whether or not onDragEnd should fire, the GridItem definitely needs to reset the draggable state.

GridItem.jsx#L414:

    this.setState({ dragging: newPosition });

    // Call callback with this data
    const { x, y } = calcXY(
      this.getPositionParams(),
      newPosition.top,
      newPosition.left,
      this.props.w,
      this.props.h
    );

    return onDragStart.call(this, this.props.i, x, y, {
      e,
      node,
      newPosition
    });
  };

However, if onDragStart.call returns false, denoting a cancellation of the drag event, the dragging state is not reset. This has the side effect of breaking grid resizing (as the tile is being "dragged" during the resize events).

[github-actions[bot]]

This issue is stale because it has been open 30 days with no activity. Remove stale label or comment or this issue will be closed in 7 days

[agg23]

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

[jmtimko5]

Can we reopen, I am also seeing this bug.