React-table: Resizing with useResizeColumns can trigger sorting when use with useSortBy

[krashdifferent]

Describe the bug (required)
Mouse events on resize objects propagate upwards to the containing elements, meaning they can trigger sort events also attached to header cells.

Provide an example via Codesandbox! (required)
https://codesandbox.io/s/amazing-dream-x4iyw

Steps To Reproduce (required)
Steps to reproduce the behavior:

1. Resize "First Name" column.
2. note the column sorting changes

Expected behavior (Recommended)
mouseDown events captured in the resize object props should call stopPropagation so the sorting (and other) props can be attached to the resize parent elements without triggered on resize.

[Mikoz93]

@krashdifferent The getResizerProps() prop getter only returns onMouseDown and onTouchStart. To fix this issue, an onClick would also have to stop the propagation (I know that that's what you probably meant by saying 'mousDown events', just wanted to clarify).

[barbara-lea]

Does anyone know a workaround for this? :)

[berkin]

i moved out the resizer out of the cell as a quick fix. https://codesandbox.io/s/brave-sanne-6o1mg

[krashdifferent]

Another simple work around, add an onClick handler to the resizer that calls stopPropagation:

<div className={classes.resizer} {...column.getResizerProps({onClick(ev){ev.stopPropagation()}})} />

[tannerlinsley]

Or even: Place the sortBy props on the text, not the entire cell.