Infinite animation

[ghost]

My collapsed block has top and bottom padding. When i collapsed it - block height increases indefinitely (in animation loop). Looks like it increases by collapsed block height + padding every second.

[roginfarrer]

Can you provide a codesandbox example? Or some steps to reproduce? Which version?

[ghost]

@roginfarrer Can't, cause I received TypeError: Cannot read property 'useMemo' of undefined every time, when i tried to use your library in code sandbox

[roginfarrer]

Sounds like you don't have React installed. The library requires React v16.8.x.

Here's a codesandbox demo

[roginfarrer]

Closing due to inactivity.

[saranchonkau]

The same bug!
We can easily reproduce it by adding padding to container that receives collapse props.
I tried it with basic demo on your demo site

[roginfarrer]

I think this is related to challenges measuring the element with padding applied. Will need to dig in further.

[Sandstedt]

A quick fix is to apply padding to the child element instead.
<section {...getCollapseProps()}><div style={{ padding: 20 }}>{props.children}</div></section>

[roginfarrer]

I'm thinking the solution here is just to document this limitation and add a console.warn if the padding property is passed to the Collapse. I looked into getting the vertical padding when measuring the element's dimensions via window.getComputedStyle, but that operation is costly, and still doesn't give a smooth closing transition (the transition ends at the element's sum of the top and bottom padding, not 0). As @Sandstedt said, the best solution here is to apply padding to the children instead.