fix(vee-select): make validation work and add error state

vuesion · Nov 26, 2021 · 0e81e04 · 0e81e04
1 parent 0bea3bd
commit 0e81e04
Show file tree

Hide file tree

Showing 2 changed files with 16 additions and 2 deletions.
diff --git a/src/components/forms/FormExample/FormExample.vue b/src/components/forms/FormExample/FormExample.vue
@@ -176,13 +176,14 @@ export default defineComponent({
       street: '',
       zipCode: '',
       city: '',
-      country: 'de',
+      country: '',
       acceptTerms: false,
       newsletter: false,
     });
 
     // computed
     const countryOptions = computed(() => [
+      { label: '', value: '' },
       { label: 'Germany', value: 'de' },
       { label: 'USA', value: 'us' },
       { label: 'Other', value: 'other' },

diff --git a/src/components/input-and-actions/VueSelect/VueSelect.vue b/src/components/input-and-actions/VueSelect/VueSelect.vue
@@ -1,5 +1,12 @@
 <template>
-  <ValidationProvider v-slot="{ errors }" ref="validator" :vid="id" :name="name" :rules="validation" tag="div">
+  <ValidationProvider
+    v-slot="{ errors, validate }"
+    ref="validator"
+    :vid="id"
+    :name="name"
+    :rules="validation"
+    tag="div"
+  >
     <div
       ref="selectRef"
       :class="[$style.vueSelect, disabled && $style.disabled, errors.length > 0 && $style.error]"
@@ -50,6 +57,7 @@
           :tabindex="disabled ? -1 : 0"
           role="listbox"
           @click.stop.prevent="toggleMenu"
+          @blur="validate"
         >
           {{ inputValueOption ? inputValueOption.label : placeholder }}
         </div>
@@ -298,6 +306,11 @@ export default defineComponent({
       background: $select-bg-error;
       border: $select-border-error;
     }
+    .nativeSelect,
+    .customSelect {
+      background: $select-bg-error;
+      border: $select-border-error;
+    }
   }
 
   &.disabled {