reactjsmaterial-ui

Disabling collapse or expand in accordion of material-ui


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?


Solution

  • 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