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?
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 :
`
<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, onExpandChange
will 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.
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.