"Maximum call stack size exceeded" when passing "display: flex" into "style"

[sompylasar]

Just adding display: 'flex' to the style prop of the Collapse causes "Uncaught RangeError: Maximum call stack size exceeded".

From my investigation, the infinite recursion is caused by the setState call in the onHeightReady callback which is called from within a setState callback (from react-height).

Repro: http://codepen.io/anon/pen/WrYBbP?editors=101
Just click "Toggle" on the first example and look into the console.

This may be an issue of react-height or even react itself. I'm not sure what to do with that, so reporting here first.

[nkbt]

Thanks for report! I'll have a look at it as soon as I can

[ApurvaB]

Hi , Is this issue fixed?

[nkbt]

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).

[nathanmarks]

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

[nkbt]

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!

[nathanmarks]

@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

[nkbt]

Cool 👌

[nkbt]

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

[nkbt]

Will add an example case...