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 4ad515fbb..6f09ecf6c 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 @@ -78,6 +78,7 @@ import { applicationConfig } from "@/constants/application-config.js"; import { defineRule } from "vee-validate"; import { required, regex } from "@/helpers/validation-rules"; import { errorMessages } from "@/constants/error-messages"; +import { fill } from "lodash"; // DEFINE VALIDATION RULES defineRule("street-address-required", required(errorMessages.STREET_ADDRESS_REQUIRED)); @@ -113,7 +114,6 @@ export default { matchingIndirectly: false, matchFound: null, // null = no attempted match, true = match was found, false = match was not found enterPressed: false, - isAddressWatchActive: false, // Only deep watch the address model when a match was not found }; }, computed: { @@ -235,27 +235,23 @@ export default { }); addressField1.addEventListener("keydown", (e) => { - if (e.code === "Enter" || e.code === "NumpadEnter" || e.code === "Tab") { - if (e.code === "Tab") { - self.matchingIndirectly = true; + if (e.code === "Enter" || e.code === "NumpadEnter") { + const selectedItem = document.querySelector(".pac-container .pac-item-selected"); + if (selectedItem !== null) { + // Fill-in the address using selected item in the list. + fillInAddress(selectedItem); } else { - self.enterPressed = true; - } - - addressField1.blur(); + // Fill-in the address using first item in the list. + fillInAddressUsingFirstItem(); + } } else { return; } }); addressField1.addEventListener("change", () => { - // NOTE: The "place_changed" event of the autocomplete fires after this and will use either the address the user had chosen - // using either the down / up arrows or the address the user was hovering over when they pressed "Enter." - - // If a match has been previously found then do nothing - // OR - // If the user pressed "Enter" then do nothing - if (self.matchFound || self.enterPressed) { + // If a match has been previously attempted then do nothing + if (self.matchFound !== null) { return; } @@ -267,29 +263,33 @@ export default { // 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. - const item = document.querySelector(".pac-container .pac-item"); - if (item != null) { - self.matchingIndirectly = true; - - const firstResult = item.textContent; - const geocoder = new window.google.maps.Geocoder(); - geocoder.geocode( - { - address: firstResult, - }, - function (results, status) { - if (status === window.google.maps.GeocoderStatus.OK) { - fillInAddress(results[0]); - } - } - ); - } else { - // No addresses found for the input - self.matchFound = false; - } + fillInAddressUsingFirstItem(); } + }); + function fillInAddressUsingFirstItem() { + // Fill-in the address using first item in the list. + const item = document.querySelector(".pac-container .pac-item"); + if (item != null) { + const firstResult = item.textContent; + const geocoder = new window.google.maps.Geocoder(); + geocoder.geocode( + { + address: firstResult, + }, + function (results, status) { + if (status === window.google.maps.GeocoderStatus.OK) { + fillInAddress(results[0]); + self.displayVerificationWarning = true; + } + } + ); + } else { + self.matchFound = false; + } + } + function fillInAddress(place) { if (!place) { place = autocomplete.getPlace(); @@ -297,6 +297,7 @@ export default { if (place && place.address_components) { self.matchFound = true; + self.addressModel.streetAddress = ""; self.$nextTick(function () { self.showAddressFields = true; @@ -329,8 +330,6 @@ export default { } } - self.displayVerificationWarning = self.matchingIndirectly; - // after showing the address fields, disable the address autocomplete window.google.maps.event.removeListener(autocompleteListener); window.google.maps.event.clearInstanceListeners(autocomplete); @@ -340,8 +339,6 @@ export default { pacContainer.remove(); } }); - } else { - self.displayVerificationWarning = true; } } }) @@ -357,6 +354,13 @@ export default { watch: { matchFound: { handler(newValue) { + if (newValue === null) { + this.displayNoMatchWarning = false; + this.displayVerificationWarning = false; + this.unwatchAddress(); + return; + } + if (!newValue) { this.displayNoMatchWarning = true; @@ -366,22 +370,18 @@ export default { this.showAddressFields = true; this.displayVerificationWarning = false; - this.$nextTick(function () { - // Only deep watch the Address Model after a failed match - this.isAddressWatchActive = true; - }); + // Only deep watch the Address Model after a failed match + this.unwatchAddress = this.$watch( + "addressModel", + () => { + // When the address model changes reset to "no attempted match" + this.matchFound = null; + }, + { deep: true } + ); } }, }, - addressModel: { - handler() { - if (this.isAddressWatchActive) { - this.displayNoMatchWarning = false; - this.isAddressWatchActive = false; - } - }, - deep: true, - }, }, components: { textboxQuestion,