From b5aa014e85ed8ae01caa0f774fcccd72b0abbb4e Mon Sep 17 00:00:00 2001
From: Leah Schumann <leah.schumann@safelite.com>
Date: Tue, 3 May 2022 10:59:33 -0400
Subject: [PATCH] Added 'eager' validation to textbox-question component

---
 .../textbox-question/textbox-question.vue     | 37 ++++++++++++++++---
 1 file changed, 32 insertions(+), 5 deletions(-)

diff --git a/src/common-components/textbox-question/textbox-question.vue b/src/common-components/textbox-question/textbox-question.vue
index 00dcdfb88..40e8fb1e6 100644
--- a/src/common-components/textbox-question/textbox-question.vue
+++ b/src/common-components/textbox-question/textbox-question.vue
@@ -1,8 +1,11 @@
 <template>
 	<div class="textbox-question" :class="(errors && errors.length) || hasError ? 'has-error' : ''">
 		<label :for="inputId" :aria-label="questionText" class="form-label" v-html="labelText"></label>
-		<input v-model="value"
+		<input
+			v-on="validationListeners" 
+			v-model="value"
 			v-maska="mask"
+
 			:type="type"
 			class="form-control"
 			:ref="inputId"
@@ -14,9 +17,7 @@
 			:aria-required="isRequired"
 			autocomplete="off"
 			:class="[hasIcon ? 'has-icon' : '', iconRight ? 'icon-right' : '']"
-			:validationRules="validationRules"
-			@change="handleChange"
-			@blur="handleBlur" />
+			:validationRules="validationRules" />
 		<div v-show="errorMessage" class="row mt-2 form-test-error">
 			<span role="alert">{{ errorMessage }}</span>
 		</div>
@@ -24,7 +25,7 @@
 </template>
 
 <script>
-
+import { computed } from 'vue';
 import { useField } from "vee-validate";
 
 export default {
@@ -57,6 +58,7 @@ export default {
 		const fieldOptions = {
 			type: "text",
 			value: props.modelValue,
+			validateOnValueUpdate: false,
 		};
 
 		const {
@@ -68,6 +70,25 @@ export default {
 			errors,
 		} = useField(props.inputId, props.validationRules, fieldOptions);
 
+		const validationListeners = computed(() => {
+			// If the field is valid or have not been validated yet
+			// lazy
+			if (!errorMessage.value) {
+				return {
+				blur: handleChange,
+				change: handleChange,
+				// disable `shouldValidate` to avoid validating on input
+				input: e => handleChange(e, false),
+				};
+			}
+			// Aggressive
+			return {
+				blur: handleChange,
+				change: handleChange,
+				input: handleChange, // only switched this
+			};
+		});		
+
 		return {
 			errorMessage,
 			handleBlur,
@@ -75,6 +96,7 @@ export default {
 			validate,
 			meta,
 			errors,
+			validationListeners
 		};
 	},
 	computed: {
@@ -110,6 +132,11 @@ export default {
 			}
 		}
 	},
+	watch: {
+		value(newValue) {
+			this.handleChange(newValue);
+		}
+	}
 };
 </script>