Material-ui: Card.onExpandChange called twice

Created on 7 Nov 2015  ·  8Comments  ·  Source: mui-org/material-ui

When I set both 'actAsExpander' and 'showExpandableButton' of CardHeader, the onExpandChange function will be called twice when clicking the expand button.

Is it an issue to be fixed, or a feature as it is?

bug 🐛

Most helpful comment

It looks to me like this issue still exists. See https://github.com/callemall/material-ui/blob/v0.15.4/src/Card/Card.js#L106-L114
In the event that showExpandableButton and and actAsExpander are true, the child (CardHeader) will receive handleExpanding as the prop touchTapEvent AND CardExpandable will receive handleExpanding as the prop onExpandChange. Both of these will be triggered by a click on the CardExpandable component. I think this issue could be solved by adding event.stopPropagation() to the handleExpanding function.

All 8 comments

I don't think its an issue anymore. I am closing this for now if you feel you need further help with this do let me know i will reopen this.

It looks to me like this issue still exists. See https://github.com/callemall/material-ui/blob/v0.15.4/src/Card/Card.js#L106-L114
In the event that showExpandableButton and and actAsExpander are true, the child (CardHeader) will receive handleExpanding as the prop touchTapEvent AND CardExpandable will receive handleExpanding as the prop onExpandChange. Both of these will be triggered by a click on the CardExpandable component. I think this issue could be solved by adding event.stopPropagation() to the handleExpanding function.

@tbescherer ,I agree with you.
My demo Code :
` onExpandChange={this.handleChange}

<CardHeader
    actAsExpander
    showExpandableButton
>
    <div className="details-selector-show" onClick={this.handleClick}>
    </div>
</CardHeader>

handleChange()
{
console.log('change');
}

handleClick(e)
{
console.log('click');
e.stopPropagation();
}`
I have two issue:
1:I can not find any props to modify showExpandableButton's style in

2:
the onExpandChange is always invoked before handleClick, which means I can not use stopPropagation. and just like @rogerwq, onExpandChangewill be triggered twice if
ExpandableButton clicked.

this seems to persist in ~0.16.4

^
It persists in 0.16.7. too.

I'm using Lodash _debounce_ method as a temporary workaround. It prevents my onChange handler function from being called twice.

<Card onExpandChange={debounce(this.onExpandChange, 150)}>
  ...
</Card>

the issue still persists

Given that this issue seems to still exist, can someone explain why this was closed? Can someone re-open this? I'd prefer not to create a new issue just to replicate the content.

Was this page helpful?
0 / 5 - 0 ratings

Related issues

revskill10 picture revskill10  ·  3Comments

anthony-dandrea picture anthony-dandrea  ·  3Comments

ryanflorence picture ryanflorence  ·  3Comments

zabojad picture zabojad  ·  3Comments

chris-hinds picture chris-hinds  ·  3Comments