Expanding elements does not increase size of carousel

[Joshuaatt]

• What version of nuka-carousel are you using? 4.6.1 (4.6.2 needs a dependency fixed)
• What version of React are you using? 16.12.0
• What browser are you using? Chrome
• What machine are you on? Mac

Expected behavior: When expanding an element the carousel also increases in size Actual behavior: When expanding an element the expansion is not visible until the next event on the carousel.

Sandbox example

[sarmeyer]

Hey @Joshuaatt - I'm trying to figure out what's going on here and as soon as I have some answers I'll let you know!

These are mostly notes for myself, but if anyone else has any ideas, I'm all ears!

I'm seeing some very strange behavior. I replicated your sandbox in the demo app and I am seeing nearly the same thing you are in the sandbox. The only difference is that when running the demo locally, if I click outside of the window (eg. the devtools), the carousel resizes (open or close). In the sandbox, only clicking inside the carousel or on the slide will push the carousel into its intended height.

I set a few breakpoints and logged out the slideHeight and the slideHeight is updated after the extra click (like we're seeing in the demo and sandbox), but strangely the setDimensions method is not called until after the extra click. And this is what sets our new height. I'm not sure why a click outside of the browser window would behave this way. I tested in Firefox and I could get the close functionality to work normally (sometimes!). But chrome and safari behave the same.

No answers for now, but maybe this will help us track down the issue.

[Joshuaatt]

Thanks @sarmeyer! I was thinking that maybe it was the animation that was preventing the resize since setDimensions() would likely be fired before the animation was done. I was able to adjust the size of the carousel by creating a ref and calling setDimensions() in a setTimeout(). This works for expanding the carousel, but it doesn't look smooth like the MUI <Collapse /> component intended. Also if the setTimeout() is too long it will cut off the content for the amount of time it is over. If the timeout is too short the carousel will not resize to the max height of the resized element.

Please let me know of a better way of doing this if you find one. Ideally the carousel would be aware of the animation and do the same. I'm not sure how this would be implemented.

Sandbox example with ref