Height 0px on foldable unfold

[repalash]

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.

[repalash]

As a quick test, I added this code just after folder creation and it fixed the overlapping issue (the height is set to auto) but basically disables the css height transition animation.

        folder.controller_.foldable.value('expanded').emitter.on('change', (value) => {
            folder.controller_.foldable.set('shouldFixHeight', false)
            folder.controller_.foldable.set('expandedHeight', null)
            folder.controller_.foldable.set('completed', true)
        })

[cocopon]

Thank you for reporting the issue. Can you share your environment (OS, browser, etc.) and a code example to reproduce the issue? These are helpful to investigate the issue.

[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.

[cocopon]

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

[cocopon]

Released in 3.0.8.

[antlii]

The problem is still here, but it happens with folders nested in tabs https://codepen.io/antlii/pen/eYLzMQy