diff --git a/src/common-components/textbox-question/textbox-question.vue b/src/common-components/textbox-question/textbox-question.vue index 4d1fac173..2417f3da8 100644 --- a/src/common-components/textbox-question/textbox-question.vue +++ b/src/common-components/textbox-question/textbox-question.vue @@ -71,7 +71,7 @@ export default { const fieldOptions = { type: "text", value: modelValue, - initialValue: initialValue + initialValue: initialValue, }; const { 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 59e4d26ab..c310fbd10 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 @@ -77,6 +77,8 @@ export default ({ alertCopyVerificationWarning: "", alertHeadlineNoMatchWarning: "", alertCopyNoMatchWarning: "", + autocomplete: {}, + autocompleteListener: {} } }, computed: { @@ -165,7 +167,7 @@ export default ({ this.$loadScript(`https://maps.googleapis.com/maps/api/js?key=${apiKey}&libraries=places`) .then(() => { // Script is loaded, initialize the autocomplete textbox - const autocomplete = new window.google.maps.places.Autocomplete( + self.autocomplete = new window.google.maps.places.Autocomplete( addressField1, { componentRestrictions: { country: ["us"] }, @@ -175,7 +177,7 @@ export default ({ ); // Standard place_changed event handling - const autocompleteListener = window.google.maps.event.addListener(autocomplete, 'place_changed', fillInAddress); + self.autocompleteListener = window.google.maps.event.addListener(this.autocomplete, 'place_changed', fillInAddress); // Wrapping the addressField1 element in the Google Address Autocomplete object // will cause "autocomplete='off'" which Chrome completely ignores. This event @@ -221,12 +223,10 @@ export default ({ function fillInAddress(place) { if (!place) { - place = autocomplete.getPlace(); + place = self.autocomplete.getPlace(); } if (place && place.address_components) { - self.showAddressFields = true; - for (const component of place.address_components) { const componentType = component.types[0]; @@ -257,18 +257,15 @@ export default ({ self.displayVerificationWarning = false; self.displayNoMatchWarning = false; + + self.showAddressFields = true; } else { self.displayVerificationWarning = true; self.displayNoMatchWarning = false; } - // after showing the address fields, disable the address autocomplete - window.google.maps.event.removeListener(autocompleteListener); - window.google.maps.event.clearInstanceListeners(autocomplete); - addressField1.onchange = null; - const pacContainer = document.querySelector(".pac-container"); - pacContainer.remove(); + } }) @@ -296,6 +293,17 @@ export default ({ } }, deep: true + }, + showAddressFields: { + handler(newValue) { + // after showing the address fields, disable the address autocomplete + window.google.maps.event.removeListener(this.autocompleteListener); + window.google.maps.event.clearInstanceListeners(this.autocomplete); + const addressField1 = document.getElementById("autocomplete"); + addressField1.onchange = null; + const pacContainer = document.querySelector(".pac-container"); + pacContainer.remove(); + } } }, components: {