CODEWITHSUNDEEP
reactjsmaterial-ui
jammy
jammy

Reputation: 977

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?

Upvotes: 10

Views: 23031

Answers (3)

Londeren
Londeren

Reputation: 3331

Note for people like me, who tried to do e.stopPropagation() on onChange event — it won't work. Only onClick will work, as pointed out in the approved answer.

Upvotes: 1

Paul Dev
Paul Dev

Reputation: 49

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;
}

Upvotes: 4

evan_schmevan
evan_schmevan

Reputation: 1691

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

Upvotes: 18

Related Questions