Disabling collapse or expand in accordion of material-ui

Question

I have an accordion of MaterialUI where I also added few icons but on click of those two particular icons, I don't want the accordion to get expanded or collapsed. I want other onClick event to happen for the click but not expand or collapse. Here is the code I am using.

<ExpansionPanel>
  <ExpansionPanelSummary expandIcon={<ExpandMoreIcon />}>
    <Typography  className={classes.heading}>
      {name}
    </Typography>


  <ListItem>
      <ListItemText  />
      <IconButton color="primary" aria-label="Edit" onClick={onClickEdit}>
          <Edit />
      </IconButton>
      <IconButton onClick={onClickDelete} color="secondary" aria-label="Delete">
          <Delete />
      </IconButton>
  </ListItem>
</ExpansionPanelSummary>
           

For click of two icons, I don't want accordion to expand or collapse. Is this anyway related?

Answer 1

You could stop the event from bubbling up to the parent in your onClickDelete or onClickEdit function:

function onClickDelete(event) {
    event.stopPropagation();
    // Handle click here
}

Here's a rough example: https://codesandbox.io/s/54vypx6k9n