Ag-Grid Prevent onRowClicked event when clicking icon inside cell

Question

I have a cell renderer that returns the name property and objects on a row:

const nameRenderer = ({ value, data }) => {
    const { id: queueId } = data;
    return (
      <Box>
        <div className="row-hidden-menu">
            <IconButton
              icon="menu"
              onClick={({ event }) => {
                event.preventDefault();
                event.stopPropagation();
                onMenuClick();
              }}
            />
        </div>
      </Box>
    );
  };

The issue I have is that I have an onRowClick function but I don't want that function to be called when I click the icon from the nameRenderer. Right now when the menu opens, the onRowClicked event navigates to a new page.

@sandeepjoshi your assumption is wrong. `stopPropagation()` will stop the event from bubbling up while `preventDefault()` will only surpress the default behavior of the event. The code provided in the question is in the right direction but it doesn't work because of a React design quirk. — NearHuscarl, Sep 19 '20 at 12:18

score 6 · Accepted Answer · answered Sep 19 '20 at 12:15

See this answer for more in-depth explanation, but the gist is that the event that you receive from the onClick callback is React's synthetic event which is a wrapper of the native event. Calling stopPropagation() from a synthetic event will not stop the real event from bubbling up and it is a quirk of the React framework for a long time.

Solution: attach your onClick event handler to the real DOM element instead.

function ButtonCellRenderer() {
  return (
    <button
      ref={(ref) => {
        if (!ref) return;

        ref.onclick = (e) => {
          console.log("native event handler");
          e.stopPropagation(); // this works
          // put your logic here instead because e.stopPropagation() will
          // stop React's synthetic event
        };
      }}
      onClick={(e) => {
        e.stopPropagation(); // this doesn't work
      }}
    >
      Click me
    </button>
  );
}

Live Demo

score 0 · Answer 2 · answered May 08 '23 at 12:21

There is also workaround with preventDefault()

Inside cell you might have code like this:

<div
  onClick={(e) => e.preventDefault()}
>
 <Button />
</div>

And use original handler:

<AgGrid 
  onRowClicked={(row) => {
    if(row.event.defaultPrevented) {
      return null
    }

    doSomethingHere()
  }}
/>

Ag-Grid Prevent onRowClicked event when clicking icon inside cell

2 Answers2

Live Demo