fix: validation on blur

app/src/components/AdressInputSelect.vue

@@ -7,7 +7,6 @@
       :state="state"
       :aria-describedby="id + 'local-part-desc'"
       @update:modelValue="onInput('localPart', $event)"
-      @blur="$parent.$emit('touch')"
     />
 
     <BInputGroupAppend>
@@ -20,7 +19,6 @@
         :choices="choices"
         :aria-describedby="id + 'domain-desc'"
         @update:modelValue="onInput('domain', $event)"
-        @blur="$parent.$emit('touch')"
       />
     </BInputGroupAppend>
 

app/src/components/ConfigPanels.vue

@@ -55,7 +55,7 @@ export default {
   setup(props) {
     const externalResults = toRef(props, 'externalResults')
     return {
-      v$: useVuelidate({ $externalResults: externalResults, $autoDirty: true }),
+      v$: useVuelidate({ $externalResults: externalResults }),
     }
   },
 

app/src/components/globals/FormField.vue

@@ -48,6 +48,8 @@
 </template>
 
 <script>
+import { provide } from 'vue'
+
 export default {
   name: 'FormField',
 
@@ -67,6 +69,22 @@ export default {
     validationIndex: { type: Number, default: null },
   },
 
+  setup(props) {
+    function touch(name) {
+      if (props.validation) {
+        // For fields that have multiple elements
+        if (name) {
+          props.validation[name].$touch()
+        } else {
+          props.validation.$touch()
+        }
+      }
+    }
+    provide('touch', touch)
+
+    return { touch }
+  },
+
   computed: {
     _id() {
       if (this.id) return this.id
@@ -127,19 +145,6 @@ export default {
       return ''
     },
   },
-
-  methods: {
-    touch(name) {
-      if (this.validation) {
-        // For fields that have multiple elements
-        if (name) {
-          this.validation[name].$touch()
-        } else {
-          this.validation.$touch()
-        }
-      }
-    },
-  },
 }
 </script>
 

app/src/components/globals/formItems/FileItem.vue

@@ -20,13 +20,14 @@
       :state="state"
       :browse-text="$t('words.browse')"
       @update:modelValue="onInput"
-      @blur="$parent.$emit('touch', name)"
+      @blur="touch(name)"
-      @focusout="$parent.$emit('touch', name)"
+      @focusout="touch(name)"
     />
   </BButtonGroup>
 </template>
 
 <script>
+import { inject } from 'vue'
 import { getFileContent } from '@/helpers/commons'
 
 export default {
@@ -43,6 +44,12 @@ export default {
     name: { type: String, default: null },
   },
 
+  setup() {
+    return {
+      touch: inject('touch'),
+    }
+  },
+
   computed: {
     _placeholder: function () {
       return this.modelValue.file === null

app/src/components/globals/formItems/InputItem.vue

@@ -12,11 +12,13 @@
     :step="step"
     :trim="trim"
     :autocomplete="autocomplete_"
-    @blur="$parent.$emit('touch', name)"
+    @blur="touch(name)"
   />
 </template>
 
 <script>
+import { inject } from 'vue'
+
 export default {
   name: 'InputItem',
 
@@ -36,6 +38,12 @@ export default {
     name: { type: String, default: null },
   },
 
+  setup() {
+    return {
+      touch: inject('touch'),
+    }
+  },
+
   data() {
     return {
       autocomplete_: this.autocomplete

app/src/components/globals/formItems/SelectItem.vue

@@ -5,20 +5,28 @@
     :id="id"
     :options="choices"
     :required="required"
-    @blur="$emit('blur', modelValue)"
+    @blur="touch(name)"
   />
 </template>
 
 <script>
+import { inject } from 'vue'
+
 export default {
   name: 'SelectItem',
 
   props: {
     modelValue: { type: [String, null], default: null },
     id: { type: String, default: null },
-    choices: { type: [Array, Object], required: true },
+    choices: { type: Array, required: true },
     required: { type: Boolean, default: false },
     name: { type: String, default: null },
   },
+
+  setup() {
+    return {
+      touch: inject('touch'),
+    }
+  },
 }
 </script>

app/src/components/globals/formItems/TagsItem.vue

@@ -10,11 +10,13 @@
     remove-on-delete
     :state="state"
     :options="options"
-    @blur="$parent.$emit('touch', name)"
+    @blur="touch(name)"
   />
 </template>
 
 <script>
+import { inject } from 'vue'
+
 export default {
   name: 'TagsItem',
 
@@ -28,5 +30,11 @@ export default {
     name: { type: String, default: null },
     options: { type: Array, default: null },
   },
+
+  setup() {
+    return {
+      touch: inject('touch'),
+    }
+  },
 }
 </script>

app/src/components/globals/formItems/TextAreaItem.vue

@@ -7,11 +7,13 @@
     :required="required"
     :state="state"
     rows="4"
-    @blur="$parent.$emit('touch', name)"
+    @blur="touch(name)"
   />
 </template>
 
 <script>
+import { inject } from 'vue'
+
 export default {
   name: 'TextAreaItem',
 
@@ -24,5 +26,11 @@ export default {
     state: { type: Boolean, default: null },
     name: { type: String, default: null },
   },
+
+  setup() {
+    return {
+      touch: inject('touch'),
+    }
+  },
 }
 </script>