Capturing grid item click event in react-grid-layout

Question

Is it possible to capture the grid item's click and cancel the drag event? I want to open a modal window when a grid item is clicked, but I can't figure out how to implement this. I'm capturing the click with onClick, but stopPropagation and preventDefault don't prevent the mousedown event that starts the dragging process.

Answer 1

This can be done by passing a onMouseDown to a child div element.

<RGL ... >
  <div> // If you add onMouseDown here react-draggable will override it. You will have to use nested element to capture clicks
    <div onMouseDown={ e => e.stopPropagation() }>
      ...
    </div>
  <div>
</RGL>