jason/DigitalConsumer.FixMyGlass
1
0
Fork 0
Code Issues Pull requests Projects Releases Packages Wiki Activity Actions

Reverting previous change to disabling address autocomplete after displaying additional address fields

Browse source
This commit is contained in:
Leah Schumann 2022-05-18 14:02:29 -04:00
parent 5530556b59
commit fc8e449384
1 changed files with 15 additions and 20 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

35
src/layouts/address-lookup/customer-questions/address-questions/address-questions.vue
View file

@ -77,8 +77,6 @@ export default ({
alertCopyVerificationWarning: "",
alertHeadlineNoMatchWarning: "",
alertCopyNoMatchWarning: "",
autocomplete: {},
autocompleteListener: {}
}
},
computed: {
@ -167,7 +165,7 @@ export default ({
this.$loadScript(`https://maps.googleapis.com/maps/api/js?key=${apiKey}&libraries=places`)
.then(() => {
// Script is loaded, initialize the autocomplete textbox
self.autocomplete = new window.google.maps.places.Autocomplete(
const autocomplete = new window.google.maps.places.Autocomplete(
addressField1,
{
componentRestrictions: { country: ["us"] },
@ -177,7 +175,7 @@ export default ({
);
// Standard place_changed event handling
self.autocompleteListener = window.google.maps.event.addListener(this.autocomplete, 'place_changed', fillInAddress);
const autocompleteListener = window.google.maps.event.addListener(autocomplete, 'place_changed', fillInAddress);
// Wrapping the addressField1 element in the Google Address Autocomplete object
// will cause "autocomplete='off'" which Chrome completely ignores. This event
@ -189,7 +187,10 @@ export default ({
// Make place results box stick to the input on scroll
const streetAddressField = document.getElementById("streetAddressField");
const autocompleteResultsContainer = document.getElementsByClassName("pac-container")[0];
streetAddressField.appendChild(autocompleteResultsContainer);
if (autocompleteResultsContainer) {
streetAddressField.appendChild(autocompleteResultsContainer);
}
})
addressField1.onchange = function() {
@ -223,10 +224,12 @@ export default ({
function fillInAddress(place) {
if (!place) {
place = self.autocomplete.getPlace();
place = autocomplete.getPlace();
}
if (place && place.address_components) {
self.showAddressFields = true;
for (const component of place.address_components) {
const componentType = component.types[0];
@ -257,15 +260,18 @@ 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();
}
})
@ -293,17 +299,6 @@ 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: {