Open marcopixel opened 6 days ago
Might be a similar issue to #20.
Hi @marcopixel, thank you for reporting the issue.
I think you pasted the wrong StackBlitz link. However, I was able to find it by browsing your profile space. As far as I can see, there are no issues:
Maybe the reproduction is still WIP?
Hi @smastrom - thanks for the quick response and feedback, appreciate it 😄
I've corrected the StackBlitz link now, also i've fixed a few minor things which i've noticed in your screenshot (maily TinyMCE not initializing in FF because of a CORS issue) so the issue wouldn't even show up on your end because the fallback is just rendering a normal textarea field instead.
If you can please try it again 🙏
It's pretty consistent on my end and i can trigger it by refreshing the window inside StackBlitz like 9/10 times, seems like it fails to properly go to the end height (since it grows while transitioning) and thus gets stuck at the last height value before change.
You can see it pretty clearly cutoff in the video down below:
https://github.com/smastrom/vue-collapsed/assets/3743025/70e216f5-d597-4a53-be01-660b99dcb21d
Yes, I now understand what's happening. Since TinyMCE loads aynchronously, most of the times it is already loaded before expanding, sometimes it is loaded while transitioning. When that happens, expanded
state because the scrollHeight doesn't match the computed height.
Same happens for other scenarios where for whatever reason, a child may change its height while expanding.
I need to reason a little bit about how to work around this as I'd like to find a rock solid solution.
For the moment, some workarounds that comes to my mind are:
@expanded
callback (maybe by displaying a Spinner in the meantime).Thank you again for providing the reproduction, I will keep you posted about any progress in the next hours or days.
Description
I've made a wrapper component with your library and when setting the parent props to
expanded
true and if there's an element inside changing size it will freeze at the expanding stage without any errors. I've added as an example TinyMCE but this will happen with other elements changing the size while transitioning.Reproduction
https://stackblitz.com/edit/vitejs-vite-1wliil?file=src%2FApp.vue,src%2Fcomponents%2FCollapse.vue,src%2Fcomponents%2FEditor.vue
Steps to Reproduce:
Expected: The collapsed content should be extended completly and all contents should be visible. Actual: The collapsed content is partially cutoff and not completly visible until we reopen the collapse.
https://github.com/smastrom/vue-collapsed/assets/3743025/2d4bdf23-aaed-45bb-935b-d0afa15067f3