diff --git a/src/common-components/textbox-question/textbox-question.vue b/src/common-components/textbox-question/textbox-question.vue
index 194ae34fc..2417f3da8 100644
--- a/src/common-components/textbox-question/textbox-question.vue
+++ b/src/common-components/textbox-question/textbox-question.vue
@@ -3,7 +3,7 @@
{
// 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: {