[Accordion] Expand icon button calls onChange twice per click

The expand icon button calls the onChange function twice per click.

It was tripping me up when I was trying to perform an action when the panel was expanded (and only wanted the action performed once).

Expected Behavior

Should only call onChange once (i.e. when the state of the panel changes).

Current Behavior

Calls it twice per state change (ONLY when the expanded button is clicked - it calls only once when the summary section is clicked, which is inconsistent). Upsets things when trying to perform an action based on a state change (ends up doing it twice). Can be worked around by maintaining a local instance variable and comparing with the provided expanded parameter.

onExpandChange = (event, expanded) => {
  if (expanded && expanded != this.prevExpanded) {
    // Call server and do other stuff
  }
  this.prevExpanded = expanded;
}

Steps to Reproduce (for bugs)

Example of behavior (to show double call):

CodeSandbox Example Link

[kgregory]

I will try to make some time for this issue tonight.

[oliviertassinari]

The issue comes from the fact that we listen twice to the onClick event. I don’t think that it’s needed. Worse, it’s introducing an unexpected behavior. We can simply remove this line: https://github.com/mui-org/material-ui/blob/fd7facc447dea934704be92d208e6268a48c9d02/src/ExpansionPanel/ExpansionPanelSummary.js#L137 And rely on event bubbling.