React-Virtualized cancel click event when sort enabled

Question

I'm creating a table where the columns are resizable like the demo on the react-virtualized GitHub page using react-draggable: https://codesandbox.io/s/j30k46l7xw

However, I also want the table to support sorting.

When I add the sort prop on the table, the sort function is called everytime a column is resized and the mouse is still inside the header column.

Check out the console log here where I have added the sort prop to the above demo: https://codesandbox.io/s/n32x4ry1ym

Is there any way to stop the sort function from being called? I've tried adding event.stopPropagation() to the onStart, onDrag and onStop in react-draggable. I also found out that the react-draggable onStop is called before react-virtualized sort.

Any ideas?

Answer 1

Just a quick parse through draggable's source code made me believe that an onClick listener which stops event propagation on should work. But for some reason it didn't. Another quick way to do this would be to wrap draggable in a div which stops the click event propagation.

https://codesandbox.io/s/ymov0zmwjx check here, just added a wrapper around your draggable component. onStart, onStop, onDrag wouldn't work here because internally these are using mouse events while the virtualized table is using click a event.