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

Changed original code to disable address autocomplete after showing city, state, and zip. The original method introduced a bug when a completely un matchable address was entered

Browse source
This commit is contained in:
Leah Schumann 2022-05-18 10:10:37 -04:00
parent 655d62418b
commit f74b5100ae
2 changed files with 20 additions and 12 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

2
src/common-components/textbox-question/textbox-question.vue
View file

@ -71,7 +71,7 @@ export default {
const fieldOptions = {
type: "text",
value: modelValue,
initialValue: initialValue
initialValue: initialValue,
};
const {

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

@ -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: {