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 28df3c5e8..37bbccb5a 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 @@ -112,7 +112,7 @@ export default { alertCopyNoMatchWarning: "", matchingIndirectly: false, matchFound: false, - enterPressed: false + enterPressed: false, }; }, computed: { @@ -234,49 +234,51 @@ export default { }); addressField1.addEventListener("keydown", (e) => { - if (e.code === "Enter" || e.code === "NumpadEnter" || e.code === "Tab") { + if (e.code === "Enter" || e.code === "NumpadEnter" || e.code === "Tab") { if (e.code === "Tab") { self.matchingIndirectly = true; } else { self.enterPressed = true; } - - addressField1.blur(); + addressField1.blur(); } else { return; } }); addressField1.addEventListener("change", () => { - // NOTE: The standard "place_changed" handler of the autocomplete will use the address the user had chosen + // NOTE: The "place_changed" event of the autocomplete fires after this and will use eitherthe address the user had chosen // using either the down / up arrows or the address the user was hovering over when they pressed "Enter." - // If there has already been a match found then do nothing + // If a match has been previously found then do nothing // OR - // If the user pressed "Enter" then do nothing + // If the user pressed "Enter" then do nothing if (self.matchFound || self.enterPressed) { return; } // Get the address that the user clicked on (if any) - const clickedAddress = document.querySelector(".pac-container .pac-item:hover"); + const clickedAddress = document.querySelector( + ".pac-container .pac-item:hover" + ); - // If the Street Address field changed without clicking (by pressing Tab, or clicking outside the field) + // If the Street Address field changed without clicking (i.e. by pressing Tab, or clicking outside the field) if (clickedAddress === null) { - // Select for the user, fill-in the address using first item in the list. + // 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, + geocoder.geocode( + { + address: firstResult, }, function (results, status) { if (status === window.google.maps.GeocoderStatus.OK) { - fillInAddress(results[0]); + fillInAddress(results[0]); self.displayNoMatchWarning = false; } } @@ -291,14 +293,13 @@ export default { self.displayNoMatchWarning = true; } } - }); function fillInAddress(place) { if (!place) { place = autocomplete.getPlace(); } - + if (place && place.address_components) { self.matchFound = true; self.addressModel.streetAddress = ""; @@ -314,7 +315,8 @@ export default { break; } case "route": { - self.addressModel.streetAddress += " " + component.short_name; + self.addressModel.streetAddress += + " " + component.short_name; break; } case "locality": { @@ -333,7 +335,7 @@ 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); @@ -342,13 +344,11 @@ export default { if (pacContainer) { pacContainer.remove(); } - }); } else { self.displayVerificationWarning = true; self.displayNoMatchWarning = false; } - } }) .catch(() => { @@ -366,8 +366,8 @@ export default { if (newValue) { this.displayNoMatchWarning = false; } - }, - } + }, + }, }, components: { textboxQuestion,