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 37bbccb5a..56f346ca2 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 @@ -111,8 +111,9 @@ export default { alertHeadlineNoMatchWarning: "", alertCopyNoMatchWarning: "", matchingIndirectly: false, - matchFound: false, + matchFound: null, // null = no attempted match, true = match was found, false = match was not found enterPressed: false, + unwatchAddress: null // handle to allow us to only deep watch the address model when a match was not found }; }, computed: { @@ -262,7 +263,7 @@ export default { const clickedAddress = document.querySelector( ".pac-container .pac-item:hover" ); - + // If the Street Address field changed without clicking (i.e. by pressing Tab, or clicking outside the field) if (clickedAddress === null) { // Fill-in the address using first item in the list. @@ -284,13 +285,8 @@ export default { } ); } else { - // If there are no addresses found for the input then display empty address fields and warnings - self.addressModel.city = ""; - self.addressModel.state = ""; - self.addressModel.zipCode = ""; - self.showAddressFields = true; - self.displayVerificationWarning = false; - self.displayNoMatchWarning = true; + // No addresses found for the input + self.matchFound = false; } } }); @@ -299,7 +295,7 @@ export default { if (!place) { place = autocomplete.getPlace(); } - + if (place && place.address_components) { self.matchFound = true; self.addressModel.streetAddress = ""; @@ -363,9 +359,27 @@ export default { watch: { matchFound: { handler(newValue) { - if (newValue) { + if (newValue === null) { this.displayNoMatchWarning = false; + this.unwatchAddress(); + return; } + + if (!newValue) { + this.displayNoMatchWarning = true; + + this.addressModel.city = ""; + this.addressModel.state = ""; + this.addressModel.zipCode = ""; + this.showAddressFields = true; + this.displayVerificationWarning = false; + + // Only deep watch the Address Model after a failed match + this.unwatchAddress = this.$watch("addressModel", (newAddress) => { + // When the address model changes reset to "no attempted match" + this.matchFound = null; + }, { deep: true }); + } }, }, },