Trigger cell onClick instead of row onClick in React Table

Question

I have the following table:

I want that clicking on the three dots on the right side of the row will open a pop up menu, so I wrote an onClick function for this cell.

I also want that clicking on any other area in the row will redirect to another page, so i override the onClick of react table, (as suggested in the react table documentation: https://github.com/tannerlinsley/react-table/tree/v6#custom-props) in the following way:

 _getTdProps = (state, rowInfo, column, instance) => ({
     onClick: (e, handleOriginal) => {
        if (this.props.onTableRowClick) {
            this.props.onTableRowClick({ e, column, rowInfo, instance });
        }
        if (this.props.shouldHandleOriginalOnClick && handleOriginal) {
           handleOriginal();
        }
    },
})

My problem is that the redirection to another page occurs also when I pressing the three dots icon, instead of opening the popup menu.

How can I make this functionality works? I've tried to play with z-index for cell and row but it didn't help.

Any suggestions?

Thanks

Answer 1

You can call the stopPropagation method on the dots click event so that the event will not bubble up to the row when you click the dots.

e.stopPropagation();

Answer 2

You can try this:

handleKeyDown(event) {
  event.preventDefault(); // Let's stop this event.
  event.stopPropagation(); // This will work.
}