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

Answer 2

Well, stopPropagation may create many interesting unexpected behaviors:

1. Like body click listeners will not be fired.
2. Besides, you need to restyle the accordion header inner content to make sure it takes the whole inner space to catch the click event

Why not a simpler way, pure CSS:

.MuiAccordionSummary-root  {
  pointer-events: none;
}