search

antoniandre / wave-ui

A UI framework for Vue.js 3 (and 2) with only the bright side. ☀️
https://antoniandre.github.io/wave-ui
MIT License
546 stars 41 forks source link

w-select prematurely disappears when closing a dialog #82

Closed macjuul closed 2 years ago

macjuul commented 2 years ago

Hey!

When placing a w-select inside a dialog and closing the dialog with a transition, you can see the input field vanish before the dialog has closed, creating a jump in the height of the card.

msedge_nkjVsPEDZM

I'm using wave-ui version 1.49.2 on Vue 2. I tried looking at the source code however couldn't find a reason as to why it happens 🤷

antoniandre commented 2 years ago

Hi @macjuul, that's weird. Any way you can share a reproduction link? If not at least the code.

Also checking in case, if you could have some CSS applied to that, that could change on component unmount - when a dialog class changes for instance?

macjuul commented 2 years ago

The code is actually open source 🙂

https://github.com/StarlaneStudios/vindigo/blob/906def2a29d26afc0f0e5f11eda30dccc8fc69ca/packages/vindigo-client/components/project/CreationDialogs.vue#L147

I can confirm it's not the v-if="isEditingNewLabel" condition on the parent div as the label isn't affected. From what can see in devtools it looks like the actual w-select__selection-wrap element disappears the moment the transition starts while the w-select stays behind. I'm also seeing the same behavior for all w-selects inside w-dialogs.

EDIT: I've made a codepen to schowcase the issue (first time using codepen so I hope I did it right) https://codepen.io/macjuul/pen/rNpByGm

antoniandre commented 2 years ago

Hi @macjuul, Thanks for the repro. Just an update that I am working on that - it's a lot more complex than I initially thought.

macjuul commented 2 years ago

Hi @macjuul, Thanks for the repro. Just an update that I am working on that - it's a lot more complex than I initially thought.

That's fine! Take your time 🙂

antoniandre commented 2 years ago

Hi @macjuul, this is now fixed in version 1.51.0. Hope it helps, please reopen if not solved. :)