Height 0px on foldable unfold

Hello, I have come across an issue where when we expand the folder, the height of the container element (in FolderView) is set to 0px. So in the UI, folder content gets overlapped with whatever is below it. This is how it looks:

I have tried to pinpoint the issue, and found that it’s been set because of shouldFixHeight in foldable.ts:51 shouldFixHeight is set to true even after the folder is expanded, so it looks like the transitionend event is not fired which resets this shouldFixHeight after which the height is set to auto.

According to the transitionend docs, there are many cases where this event does not fire, like when the transition is cancelled, if there is no transition duration or there is no transition (like from 0 -> 0px).

To fix this, I guess there should be some way to reset shouldFixHeight, expandedHeight without relying on transitionend or handling the cases where this event is not called.

I hope I was able to explain the issue.

[cocopon]

Thank you for creating the example! It’s very helpful. This should be fixed by #383, please wait for the next release.

[repalash]

Hello, I have quickly forked the tweakpane codesandbox to show the issue. This happens when you toggle folder.expanded at some places. The change are lines 157-159 in the default example. Link: https://codesandbox.io/s/tweakpane-playground-alga-forked-ru34o?file=/src/index.js

This is just one case where transitionend is not called. There would be more as mentioned in its docs.

This is how it looks in Chrome 97, Mac OS 12.0.1.