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

newoga picture newoga  ·  3Comments

chris-hinds picture chris-hinds  ·  3Comments

ghost picture ghost  ·  3Comments

mb-copart picture mb-copart  ·  3Comments

revskill10 picture revskill10  ·  3Comments