Parent height does not update when child component changes height

[ajur58]

I ran into an issue when trying to render several nested ReactShow elements. You can see an example here: https://codesandbox.io/s/jz12vw1969

As the title says, the issue appears when you show the second level elements (Show secondary button). The parent has a fixed height that does not change.

Is there a way around this?

[tannerlinsley]

That's an interesting problem. I'll look into it.

[tannerlinsley]

After sleeping on this, and trying a few things, this might be harder than expected. Firstly, when child elements are animated in any way that affects their height, it would be expected that eventually, the height of the ReactShow element would resolve to show the new height. I'd venture too after my experimentations that it would be overly complex to achieve a unison animation between random or uncontrolled children and the React Show element itself.

This leads me to think that the best way would be to simply detect actual size/scrollHeight changes of the children in an observer/polling fashion and ensure that the ReactShow component eventually resolves to the height of the element. My guess is that this would need to be debounced and/or throttled for performance as well.

Thoughts?

[tannerlinsley]

Actually, there is another solution as well. It would involve setting the height of the element to auto after the animations are complete. This would ensure that any more animations happening inside them would expand the ReactShow element naturally. I'll try and whip up a concept for this.

[tannerlinsley]

Fixed in v1.1.2 :)

[ajur58]

Sweet! Thanks for the super-quick fix, I'll try it out. 👏