feat: add touch error filtering

yaffol · sdirix · sdirix · commit e3455b44872f · 2024-05-27T16:39:54.000+02:00
This commit adds a touched ref that is bound to controls from
`useVuetifyControl` and a `handleBlur` composable that updates the
`touched` state after an input is blurred.

It also takes account of a new config setting `enableFilterErrorsBeforeTouch`
which allows the forcing of all errors to display, such as when a user
attempts to submit a form which is not completely valid.

When `touched` is used, child errors in arrays will be filtered without
checking their respective touched state.

Co-authored-by: Stefan Dirix &lt;sdirix@eclipsesource.com&gt;
diff --git a/packages/vue-vuetify/src/complex/OneOfRenderer.vue b/packages/vue-vuetify/src/complex/OneOfRenderer.vue
@@ -26,8 +26,8 @@
         item-value="index"
         v-model="selectIndex"
         v-bind="vuetifyProps('v-select')"
-        @focus="isFocused = true"
-        @blur="isFocused = false"
+        @focus="handleFocus"
+        @blur="handleBlur"
       ></v-select>
     </v-hover>
     <dispatch-renderer
diff --git a/packages/vue-vuetify/src/controls/AnyOfStringOrEnumControlRenderer.vue b/packages/vue-vuetify/src/controls/AnyOfStringOrEnumControlRenderer.vue
@@ -31,8 +31,8 @@
         :clearable="isHovering"
         v-bind="vuetifyProps('v-combobox')"
         @change="onChange"
-        @focus="isFocused = true"
-        @blur="isFocused = false"
+        @focus="handleFocus"
+        @blur="handleBlur"
       />
     </v-hover>
   </control-wrapper>
diff --git a/packages/vue-vuetify/src/controls/BooleanControlRenderer.vue b/packages/vue-vuetify/src/controls/BooleanControlRenderer.vue
@@ -20,8 +20,8 @@
       :model-value="control.data"
       v-bind="vuetifyProps('v-checkbox')"
       @change="onChange"
-      @focus="isFocused = true"
-      @blur="isFocused = false"
+      @focus="handleFocus"
+      @blur="handleBlur"
     />
   </control-wrapper>
 </template>
diff --git a/packages/vue-vuetify/src/controls/BooleanToggleControlRenderer.vue b/packages/vue-vuetify/src/controls/BooleanToggleControlRenderer.vue
@@ -22,8 +22,8 @@
       :false-value="false"
       v-bind="vuetifyProps('v-switch')"
       @change="onChange"
-      @focus="isFocused = true"
-      @blur="isFocused = false"
+      @focus="handleFocus"
+      @blur="handleBlur"
     />
   </control-wrapper>
 </template>
diff --git a/packages/vue-vuetify/src/controls/DateControlRenderer.vue b/packages/vue-vuetify/src/controls/DateControlRenderer.vue
@@ -19,8 +19,8 @@
       v-bind="vuetifyProps('v-text-field')"
       :model-value="control.data"
       @update:model-value="onChange"
-      @focus="isFocused = true"
-      @blur="isFocused = false"
+      @focus="handleFocus"
+      @blur="handleBlur"
       type="date"
     />
   </control-wrapper>
diff --git a/packages/vue-vuetify/src/controls/DateTimeControlRenderer.vue b/packages/vue-vuetify/src/controls/DateTimeControlRenderer.vue
@@ -19,8 +19,8 @@
       v-bind="vuetifyProps('v-text-field')"
       :model-value="dataTime"
       @update:model-value="onChange"
-      @focus="isFocused = true"
-      @blur="isFocused = false"
+      @focus="handleFocus"
+      @blur="handleBlur"
       type="datetime-local"
     >
     </v-text-field>
diff --git a/packages/vue-vuetify/src/controls/EnumControlRenderer.vue b/packages/vue-vuetify/src/controls/EnumControlRenderer.vue
@@ -25,8 +25,8 @@
         item-value="value"
         v-bind="vuetifyProps('v-select')"
         @update:modelValue="onChange"
-        @focus="isFocused = true"
-        @blur="isFocused = false"
+        @focus="handleFocus"
+        @blur="handleBlur"
       />
     </v-hover>
   </control-wrapper>
diff --git a/packages/vue-vuetify/src/controls/IntegerControlRenderer.vue b/packages/vue-vuetify/src/controls/IntegerControlRenderer.vue
@@ -23,8 +23,8 @@
         :clearable="isHovering"
         v-bind="vuetifyProps('v-text-field')"
         @update:model-value="onInputChange"
-        @focus="isFocused = true"
-        @blur="isFocused = false"
+        @focus="handleFocus"
+        @blur="handleBlur"
       ></v-text-field>
     </v-hover>
   </control-wrapper>
diff --git a/packages/vue-vuetify/src/controls/MultiStringControlRenderer.vue b/packages/vue-vuetify/src/controls/MultiStringControlRenderer.vue
@@ -31,8 +31,8 @@
         multi-line
         v-bind="vuetifyProps('v-textarea')"
         @update:model-value="onChange"
-        @focus="isFocused = true"
-        @blur="isFocused = false"
+        @focus="handleFocus"
+        @blur="handleBlur"
       />
     </v-hover>
   </control-wrapper>
diff --git a/packages/vue-vuetify/src/controls/NumberControlRenderer.vue b/packages/vue-vuetify/src/controls/NumberControlRenderer.vue
@@ -23,8 +23,8 @@
         :clearable="isHovering"
         v-bind="vuetifyProps('v-text-field')"
         @update:model-value="onInputChange"
-        @focus="isFocused = true"
-        @blur="isFocused = false"
+        @focus="handleFocus"
+        @blur="handleBlur"
       ></v-text-field>
     </v-hover>
   </control-wrapper>
diff --git a/packages/vue-vuetify/src/controls/OneOfEnumControlRenderer.vue b/packages/vue-vuetify/src/controls/OneOfEnumControlRenderer.vue
@@ -25,8 +25,8 @@
         item-value="value"
         v-bind="vuetifyProps('v-select')"
         @change="onChange"
-        @focus="isFocused = true"
-        @blur="isFocused = false"
+        @focus="handleFocus"
+        @blur="handleBlur"
       />
     </v-hover>
   </control-wrapper>
diff --git a/packages/vue-vuetify/src/controls/OneOfRadioGroupControlRenderer.vue b/packages/vue-vuetify/src/controls/OneOfRadioGroupControlRenderer.vue
@@ -21,8 +21,8 @@
       v-bind="vuetifyProps('v-radio-group')"
       :model-value="control.data"
       @change="onChange"
-      @focus="isFocused = true"
-      @blur="isFocused = false"
+      @focus="handleFocus"
+      @blur="handleBlur"
     >
       <v-radio
         v-for="o in control.options"
diff --git a/packages/vue-vuetify/src/controls/PasswordControlRenderer.vue b/packages/vue-vuetify/src/controls/PasswordControlRenderer.vue
@@ -30,8 +30,8 @@
       "
       v-bind="vuetifyProps('v-text-field')"
       @update:model-value="onChange"
-      @focus="isFocused = true"
-      @blur="isFocused = false"
+      @focus="handleFocus"
+      @blur="handleBlur"
     />
   </control-wrapper>
 </template>
diff --git a/packages/vue-vuetify/src/controls/RadioGroupControlRenderer.vue b/packages/vue-vuetify/src/controls/RadioGroupControlRenderer.vue
@@ -21,8 +21,8 @@
       :model-value="control.data"
       v-bind="vuetifyProps('v-radio-group')"
       @change="onChange"
-      @focus="isFocused = true"
-      @blur="isFocused = false"
+      @focus="handleFocus"
+      @blur="handleBlur"
     >
       <v-radio
         v-for="o in control.options"
diff --git a/packages/vue-vuetify/src/controls/SliderControlRenderer.vue b/packages/vue-vuetify/src/controls/SliderControlRenderer.vue
@@ -23,8 +23,8 @@
       :model-value="control.data"
       v-bind="vuetifyProps('v-slider')"
       @update:model-value="onChange"
-      @focus="isFocused = true"
-      @blur="isFocused = false"
+      @focus="handleFocus"
+      @blur="handleBlur"
     />
   </control-wrapper>
 </template>
diff --git a/packages/vue-vuetify/src/controls/StringControlRenderer.vue b/packages/vue-vuetify/src/controls/StringControlRenderer.vue
@@ -1,5 +1,4 @@
 <template>
-  <p class="text-red">live</p>
   <control-wrapper
     v-bind="controlWrapper"
     :styles="styles"
@@ -34,8 +33,8 @@
         hide-no-data
         v-bind="vuetifyProps('v-combobox')"
         @update:model-value="onChange"
-        @focus="isFocused = true"
-        @blur="isFocused = false"
+        @focus="handleFocus"
+        @blur="handleBlur"
       />
       <v-text-field
         v-else
@@ -61,8 +60,8 @@
         :clearable="isHovering"
         v-bind="vuetifyProps('v-text-field')"
         @update:model-value="onChange"
-        @focus="isFocused = true"
-        @blur="isFocused = false"
+        @focus="handleFocus"
+        @blur="handleBlur"
       />
     </v-hover>
   </control-wrapper>
diff --git a/packages/vue-vuetify/src/controls/StringMaskControlRenderer.vue b/packages/vue-vuetify/src/controls/StringMaskControlRenderer.vue
@@ -28,8 +28,8 @@
         "
         :clearable="isHovering"
         v-bind="vuetifyProps('v-text-field')"
-        @focus="isFocused = true"
-        @blur="isFocused = false"
+        @focus="handleFocus"
+        @blur="handleBlur"
         v-model="maskModel"
         v-mask="mask"
       />
diff --git a/packages/vue-vuetify/src/controls/TimeControlRenderer.vue b/packages/vue-vuetify/src/controls/TimeControlRenderer.vue
@@ -19,8 +19,8 @@
       v-bind="vuetifyProps('v-text-field')"
       :model-value="control.data"
       @update:model-value="onChange"
-      @focus="isFocused = true"
-      @blur="isFocused = false"
+      @focus="handleFocus"
+      @blur="handleBlur"
       type="time"
     >
     </v-text-field>
diff --git a/packages/vue-vuetify/src/extended/AutocompleteEnumControlRenderer.vue b/packages/vue-vuetify/src/extended/AutocompleteEnumControlRenderer.vue
@@ -26,8 +26,8 @@
         item-value="value"
         v-bind="vuetifyProps('v-select')"
         @change="onChange"
-        @focus="isFocused = true"
-        @blur="isFocused = false"
+        @focus="handleFocus"
+        @blur="handleBlur"
       />
       <v-autocomplete
         v-else
@@ -49,8 +49,8 @@
         item-value="value"
         v-bind="vuetifyProps('v-autocomplete')"
         @update:model-value="onChange"
-        @focus="isFocused = true"
-        @blur="isFocused = false"
+        @focus="handleFocus"
+        @blur="handleBlur"
       />
     </v-hover>
   </control-wrapper>
diff --git a/packages/vue-vuetify/src/extended/AutocompleteOneOfEnumControlRenderer.vue b/packages/vue-vuetify/src/extended/AutocompleteOneOfEnumControlRenderer.vue
@@ -26,8 +26,8 @@
         item-value="value"
         v-bind="vuetifyProps('v-select')"
         @change="onChange"
-        @focus="isFocused = true"
-        @blur="isFocused = false"
+        @focus="handleFocus"
+        @blur="handleBlur"
       />
       <v-autocomplete
         v-else
@@ -49,8 +49,8 @@
         item-value="value"
         v-bind="vuetifyProps('v-autocomplete')"
         @update:model-value="onChange"
-        @focus="isFocused = true"
-        @blur="isFocused = false"
+        @focus="handleFocus"
+        @blur="handleBlur"
       />
     </v-hover>
   </control-wrapper>
diff --git a/packages/vue-vuetify/src/layouts/ArrayLayoutRenderer.vue b/packages/vue-vuetify/src/layouts/ArrayLayoutRenderer.vue
@@ -434,7 +434,7 @@ const controlRenderer = defineComponent({
       }
     },
     childErrors(index: number): ErrorObject[] {
-      return this.control.childErrors.filter((e) => {
+      return this.control.childErrors.filter((e: ErrorObject) => {
         const errorDataPath = getControlPath(e);
         return errorDataPath.startsWith(
           this.composePaths(this.control.path, `${index}`)
diff --git a/packages/vue-vuetify/src/util/composition.ts b/packages/vue-vuetify/src/util/composition.ts
@@ -13,7 +13,7 @@ import get from 'lodash/get';
 import isPlainObject from 'lodash/isPlainObject';
 import { useStyles } from '../styles';
 import { computed, ComputedRef, inject, ref, provide } from 'vue';
-import Ajv from 'ajv';
+import Ajv, { ErrorObject } from 'ajv';
 
 export const useControlAppliedOptions = <I extends { control: any }>(
   input: I
@@ -75,6 +75,7 @@ export const useVuetifyControl = <
   adaptValue: (target: any) => any = (v) => v,
   debounceWait?: number
 ) => {
+  const touched = ref(false);
   const changeEmitter =
     typeof debounceWait === 'number'
       ? debounce(input.handleChange, debounceWait)
@@ -87,6 +88,21 @@ export const useVuetifyControl = <
   const appliedOptions = useControlAppliedOptions(input);
   const isFocused = ref(false);
 
+  const handleFocus = () => {
+    isFocused.value = true;
+  };
+
+  const handleBlur = () => {
+    touched.value = true;
+    isFocused.value = false;
+  };
+
+  const filteredErrors = computed(() => {
+    return touched.value || !appliedOptions.value.enableFilterErrorsBeforeTouch
+      ? input.control.value.errors
+      : '';
+  });
+
   const persistentHint = (): boolean => {
     return !isDescriptionHidden(
       input.control.value.visible,
@@ -112,8 +128,18 @@ export const useVuetifyControl = <
     return props && isPlainObject(props) ? props : {};
   };
 
+  const overwrittenControl = computed(() => {
+    return {
+      ...input.control.value,
+      errors: filteredErrors.value,
+    };
+  });
+
+  const rawErrors = computed(() => input.control.value.errors);
+
   return {
     ...input,
+    control: overwrittenControl,
     styles,
     isFocused,
     appliedOptions,
@@ -122,6 +148,10 @@ export const useVuetifyControl = <
     vuetifyProps,
     persistentHint,
     computedLabel,
+    touched,
+    handleBlur,
+    handleFocus,
+    rawErrors,
   };
 };
 
@@ -213,13 +243,30 @@ export const useVuetifyArrayControl = <I extends { control: any }>(
     }
     return `${labelValue}`;
   };
+  const filteredChildErrors = computed(() => {
+    // supress childErrors unless touch filtering is disabled
+    // otherwise all child errors will show, irrespective of their control touch state
+    const filtered: ErrorObject[] = appliedOptions.value
+      ?.enableFilterErrorsBeforeTouch
+      ? []
+      : input.control.value.childErrors;
+    return filtered;
+  });
+  const overwrittenControl = computed(() => {
+    return {
+      ...input.control.value,
+      childErrors: filteredChildErrors.value,
+    };
+  });
   return {
     ...input,
+    control: overwrittenControl,
     styles: useStyles(input.control.value.uischema),
     appliedOptions,
     childLabelForIndex,
     computedLabel,
     vuetifyProps,
+    rawChildErrors: input.control.value.childErrors,
   };
 };
 
