Nested collapsible shows animation. Help needed
Opened this issue · 4 comments
Good afternoon!
I'm working on an app with this library and nesting two collapsible. I have set them both to be open from the beginning. However, even though it shouldn't be animated, It's showing some expanding animation.
It's version 4 (in package.json) and I cannot update it to a newer version (it doesn't depend on me), so I guess I should be using hasNestedCollapse, haven't I?
Whatever way I use, it shows the animation and I can't do anything. Any advice?
No need for extra prop.
Animation happens because initial hight of the element on page load does not match resulting hight. Most likely because some content gets injected on load (after initial rendering)
Sorry this is super handwavy, but without some codepen it is impossible to guess better
It was hard to do on my phone but here is a demo with nested preopened collapse elements
https://codepen.io/nkbt/pen/xxdyyKZ
No animation there
I edited my comment as I had a mixup with the version. I said it was react-dom version 16 but I meant react-collapsed version 4. I can't really tell you how thanked I am for your big effort writing that example. We weren't able to fix it yet but we are looking at it. Could be related with the fact that some of the collapsible are hidden (display: none), and even though they are unfolded they stay hidden until an event is fired.
Latest react-collapse should be compatible with "react": ">=16.3.0", so if you are still on v16 you're covered.
I suggest updating to v5 as it works way way more reliable.
Play with that codepen and let me know if you can reproduce your issue.
But yeah when you have display:none hight would be 0. So if you show element after initial render - it will start animating.
Dynamic hight in browsers is a very tricky thing, and it takes a lot of work to make sure everything works as expected. There is no silver bullet unfortunately, so many edge cases.