Prevent event propagation on row click and dialog in material ui

Question

I'm using material-ui and I have a table with a button inside. The button opens a Dialog and I need to be able to support clicking on the table row.
The problem is that with Portals (in react) - the events are propagated, so clicking inside the Dialog (that was opened after clicking on the button) - the click event on the table-row will get fired.

This is the row:

<TableRow onClick={rowClick}>
  <TableCell>Content 1</TableCell>
  <TableCell>Row clicked {count} times</TableCell>
  <TableCell>
    <MyDialog />
  </TableCell>
</TableRow>

This is the dialog:

<>
  <IconButton onClick={handleClickOpen}>
    <EditIcon />
  </IconButton>
  <Dialog disableBackdropClick open={open} onClose={handleClose}>
    <DialogTitle>Dialog</DialogTitle>
    <DialogContent>Some content</DialogContent>
    <DialogActions>
      <Button onClick={handleClose}>Cancel</Button>
      <Button onClick={handleClose}>Save</Button>
    </DialogActions>
  </Dialog>
</>

Here is a working example:
https://codesandbox.io/s/dazzling-hofstadter-gzwll

And this is an animated gif that shows the issue:

I know I can set the "rowClick" on each cell (and leave the last cell without it) but this is just an example and I'm looking for a more generic solution.

Answer 1

It took some time to find a proper solution, but the only way to prevent the propagation of the event was to add a "click" function on the dialog itself:

<>
  <IconButton onClick={handleClickOpen}>
    <EditIcon />
  </IconButton>
  <Dialog
    disableBackdropClick
    open={open}
    onClose={handleClose}
    onClick={handleDialogClick}
  >
    <DialogTitle>Dialog</DialogTitle>
    <DialogContent>Some content</DialogContent>
    <DialogActions>
      <Button onClick={handleClose} color="primary">
        Cancel
      </Button>
      <Button onClick={handleClose} color="primary">
        Save
      </Button>
    </DialogActions>
  </Dialog>
</>

And have the handleClickDialog function stop the event propagation:

const handleDialogClick = e => {
  e.stopPropagation();
}; 

Here is a working example:
https://codesandbox.io/s/cocky-violet-19uvd

Answer 2

One option is to add an onClick handler within my-dialog.js.

const handleClick = e => {
    e.stopPropagation();
    // doesn't do anything except stop the event
  };

and then add it to your Dialog:

     <Dialog
        disableBackdropClick
        open={open}
        onClose={handleClose}
        onClick={handleClick}
      >

Fork of your sandbox with the changes: https://codesandbox.io/s/nostalgic-chaplygin-lql5m?fontsize=14&hidenavigation=1&theme=dark