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
544 stars 39 forks source link

[w-select] OnBlur type validation #115

Closed DerrikMilligan closed 1 year ago

DerrikMilligan commented 1 year ago

Currently the w-select component fails to re-validate when used in a w-form that has no-keyup-validation enabled and is relying on blur validation. Selecting a different item from the dropdown doesn't trigger a re-validation.

Here is a codepen with a minimal re-production of how it currently works.

Steps:

  1. Click Validate button
  2. Change item in the w-select
  3. Note that the validators are not re-triggered

I noticed that the w-select component is not passing the isFocused down to the w-form-element when inside a w-form component.

And added a couple $nextTick callbacks to toggle the isFocused state when the menu closes to trigger a blur type validation even though it gets focused shortly after.

antoniandre commented 1 year ago

Hi @DerrikMilligan, thank you for this PR and good explanation on the issue with reproduction link. Very helpful 👍

Indeed the isFocused was missing in the code, but I also took the opportunity to fix a couple of other things as you will see in my commit. I preferred to fix the issue at the source rather than using a couple of $nextTick, but that's teamwork. :)