Collapse with nested Collapse is kept forever in WAITING state

[nkbt]

From #34 (comment)

The solution for now is to not pass any props through parent collapse if only children are changed (so children should be connected to a flux/redux store or something). Now when props of paren collapse are changed it is transitioned to state WAITING, which locks its height. Since it is own height is not changed after that (because children are expanded with animation, so the next step height is exactly as it was before) - it may forever stay in this state =(.

So it works perfectly when children are expanded instantly (no nested collapse), but not working when collapse elements are nested.

I consider adding a flag hasNestedCollapse to skip this transition to WAITING state. This way everything would work perfectly since it has height: auto.

[sassanh]

@nkbt sorry I don't understand what you mean by passing props through parent Collapse, in the Codepen example (https://codepen.io/sassanh/pen/GqLZVy?editors=0010) I'm not passing any props "through" parent Collapse tag. I'm just providing isOpened for it.

[nkbt]

Hey, @sassanh!

I add hasNestedCollapse prop and updated your codepen: https://codepen.io/nkbt/pen/WxBJdW?editors=0010

It works well now!

Please, reopen if you have more questions about this or open new issues if something else is not working

Thanks for codepen by the way - saved heaps of time for me!

[sassanh]

I'm glad codepen helped. Thanks a lot.

[rijk]

@nkbt , I've been reading through your commits and checked out the codepen, but I'm still not clear what this does exactly? Changing to hasNestedCollapse={false} in the codepen seems to make no difference. What should I be looking at?

My use case is slightly more complex:

<Collapse>
   ... content
   <Collapse />
   ... content
   ... content
   <Collapse />
</Collapse>

(it is a timeline of comments, and the replies to a comment are rendered in another Collapse). So whether the parent <Collapse> should animate, depends on where the action is occurring:

• if it's in the content (e.g. a comment that was added/deleted) it should animate;
• if it's in a child <Collapse> (e.g. a reply added) it should not.

Was this parameter meant for this type of use case as well? How do I best approach this?

Great library btw, keep up the good work.