"Maximum call stack size exceeded" when passing "display: flex" into "style" about react-collapse HOT 9 CLOSED

from react-collapse.

Hi , Is this issue fixed?

from react-collapse.

Sorry for holding with this issue.

When container has display: flex height is calculated incorrectly and every step of animation gets "instant height" toggled from 0 to real height. That is not an easy thing to solve - could not get it fixed right away unfortunately and flied away to ReactConf. I am now coming back so hopefully have more time to look at it.

As a quick solution I would suggest to avoid setting flex to Collapse element itself. Set it to either its parent or child node like in here: http://codepen.io/nkbt/pen/ZWzpYN?editors=101
I understand that it might not be a solution in some cases, but "fixing" Collapse behaviour for flex element might not be possible (for current implementation of Collapse).

from react-collapse.

@nkbt I ended up getting this error using react-height without react-collapse. Only flex container was numerous levels up.

from react-collapse.

Yeah, height is not being properly determined on flex container.

Sorry everyone for the delay with fixing this issue (and other ones). I was working heavily on a backend/devops and did not do any UI work for last ~7 months. Now I am doing UI again and will be able to work on this (well, will have to anyway, as all these UI libs are going to be heavily used). Thanks for your patience and help!

from react-collapse.

@nkbt No worries! I appreciate the work -- it has helped me figure out my own basic solution that seems to be working (so far 😄 ) for my current use case: https://github.com/nathanmarks/material-ui/blob/stepper-updates/src/internal/ExpandTransitionChild.js

from react-collapse.

Cool 👌

from react-collapse.

Closing, most likely will be fixed by #72
Hard to tell since I cannot reproduce this anymore

from react-collapse.

Will add an example case...

from react-collapse.