From c65794f847e3e0a689acdefa9f3db52808b83934 Mon Sep 17 00:00:00 2001
From: Leah Schumann <leah.schumann@safelite.com>
Date: Thu, 14 Apr 2022 08:37:09 -0400
Subject: [PATCH] Added watch on addressModel so that when all fields have been
 populated after garbage is entered into autocomplete we clear out the No
 Match warning

---
 .../address-questions/address-questions.vue   | 37 ++++++++++++-------
 1 file changed, 24 insertions(+), 13 deletions(-)

diff --git a/src/layouts/address-lookup/customer-questions/address-questions/address-questions.vue b/src/layouts/address-lookup/customer-questions/address-questions/address-questions.vue
index 93ee9d9f7..f9263a4bc 100644
--- a/src/layouts/address-lookup/customer-questions/address-questions/address-questions.vue
+++ b/src/layouts/address-lookup/customer-questions/address-questions/address-questions.vue
@@ -5,22 +5,22 @@
 		</div>
 	</div>
 	<transition name="fade" mode="out-in">
-		<div class="address-fields" v-show="showAddressFields" aria-live="polite">
-			<div class="row my-4">
-				<div class="col">
-					<textboxQuestion cmsWidgetName="CityQuestionWidget" v-model="addressModel.city" ref="city" inputId="cbf28188fdf2436688fd735915f7ee56" disableAutoFill validationRules="city-required"/>
-				</div>
+		<div class="row my-4" v-show="showAddressFields" aria-live="polite">
+			<div class="col">
+				<textboxQuestion cmsWidgetName="CityQuestionWidget" v-model="addressModel.city" ref="city" inputId="cbf28188fdf2436688fd735915f7ee56" disableAutoFill validationRules="city-required"/>
 			</div>
-			<div class="row my-4">
-				<div class="col-6">
-					<dropdownQuestion cmsWidgetName="StateQuestionWidget" v-model="addressModel.state" ref="state" inputId="8fdf9dc2e13e430eb57529499dceb3eb" :options="stateOptions" disableAutoFill validationRules="state-required" />
-				</div>            
-				<div class="col-6">
-					<textboxQuestion cmsWidgetName="ZipQuestionWidget" v-model="addressModel.zip" ref="zip" inputId="01a9a1c2de0b4c9da8e023c9ae3be498" mask="#####" disableAutoFill validationRules="zip-required|zip-format"/>
-				</div>      
-			</div> 
 		</div>
 	</transition>
+	<transition name="fade" mode="out-in">
+		<div class="row my-4" v-show="showAddressFields" aria-live="polite">
+			<div class="col">
+				<dropdownQuestion cmsWidgetName="StateQuestionWidget" v-model="addressModel.state" ref="state" inputId="8fdf9dc2e13e430eb57529499dceb3eb" :options="stateOptions" disableAutoFill validationRules="state-required" />
+			</div>
+			<div class="col">
+				<textboxQuestion cmsWidgetName="ZipQuestionWidget" v-model="addressModel.zip" ref="zip" inputId="01a9a1c2de0b4c9da8e023c9ae3be498" mask="#####" disableAutoFill validationRules="zip-required|zip-format"/>
+			</div>
+		</div>
+	</transition>		
 	<alert ref="alertVerificationWarning" v-show="displayVerificationWarning"
 		cmsWidgetName="AlertVerificationWarningWidget"
 		alertClass="alert-warning"
@@ -251,6 +251,17 @@ export default ({
 	mounted() {
 		this.setupAddressLookup();
 	},
+	watch: {
+		addressModel: {
+			handler(newValue){
+				if (newValue.streetAddress && newValue.city && newValue.state && newValue.zip)
+				{
+					this.displayNoMatchWarning = false;
+				}
+			},
+			deep: true
+		}
+	},	
 	components: {
 		textboxQuestion,
 		dropdownQuestion,