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

Revamping to prevent JAWS Error, an additional changes to resolve issues caused by the fix

Browse source
This commit is contained in:
Leah Schumann 2023-01-18 09:15:04 -05:00
parent f37179953a
commit 00c5b46b5f
1 changed files with 52 additions and 52 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

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

@ -78,6 +78,7 @@ import { applicationConfig } from "@/constants/application-config.js";
import { defineRule } from "vee-validate"; import { defineRule } from "vee-validate";
import { required, regex } from "@/helpers/validation-rules"; import { required, regex } from "@/helpers/validation-rules";
import { errorMessages } from "@/constants/error-messages"; import { errorMessages } from "@/constants/error-messages";
import { fill } from "lodash";
// DEFINE VALIDATION RULES // DEFINE VALIDATION RULES
defineRule("street-address-required", required(errorMessages.STREET_ADDRESS_REQUIRED)); defineRule("street-address-required", required(errorMessages.STREET_ADDRESS_REQUIRED));
@ -113,7 +114,6 @@ export default {
matchingIndirectly: false, matchingIndirectly: false,
matchFound: null, // null = no attempted match, true = match was found, false = match was not found matchFound: null, // null = no attempted match, true = match was found, false = match was not found
enterPressed: false, enterPressed: false,
isAddressWatchActive: false, // Only deep watch the address model when a match was not found
}; };
}, },
computed: { computed: {
@ -235,27 +235,23 @@ export default {
}); });
addressField1.addEventListener("keydown", (e) => { addressField1.addEventListener("keydown", (e) => {
if (e.code === "Enter" || e.code === "NumpadEnter" || e.code === "Tab") { if (e.code === "Enter" || e.code === "NumpadEnter") {
if (e.code === "Tab") { const selectedItem = document.querySelector(".pac-container .pac-item-selected");
self.matchingIndirectly = true; if (selectedItem !== null) {
// Fill-in the address using selected item in the list.
fillInAddress(selectedItem);
} else { } else {
self.enterPressed = true; // Fill-in the address using first item in the list.
fillInAddressUsingFirstItem();
} }
addressField1.blur();
} else { } else {
return; return;
} }
}); });
addressField1.addEventListener("change", () => { addressField1.addEventListener("change", () => {
// NOTE: The "place_changed" event of the autocomplete fires after this and will use either the address the user had chosen // If a match has been previously attempted then do nothing
// using either the down / up arrows or the address the user was hovering over when they pressed "Enter." if (self.matchFound !== null) {
// If a match has been previously found then do nothing
// OR
// If the user pressed "Enter" then do nothing
if (self.matchFound || self.enterPressed) {
return; return;
} }
@ -267,29 +263,33 @@ export default {
// If the Street Address field changed without clicking (i.e. 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) { if (clickedAddress === null) {
// 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"); fillInAddressUsingFirstItem();
if (item != null) {
self.matchingIndirectly = true;
const firstResult = item.textContent;
const geocoder = new window.google.maps.Geocoder();
geocoder.geocode(
{
address: firstResult,
},
function (results, status) {
if (status === window.google.maps.GeocoderStatus.OK) {
fillInAddress(results[0]);
}
}
);
} else {
// No addresses found for the input
self.matchFound = false;
}
} }
}); });
function fillInAddressUsingFirstItem() {
// Fill-in the address using first item in the list.
const item = document.querySelector(".pac-container .pac-item");
if (item != null) {
const firstResult = item.textContent;
const geocoder = new window.google.maps.Geocoder();
geocoder.geocode(
{
address: firstResult,
},
function (results, status) {
if (status === window.google.maps.GeocoderStatus.OK) {
fillInAddress(results[0]);
self.displayVerificationWarning = true;
}
}
);
} else {
self.matchFound = false;
}
}
function fillInAddress(place) { function fillInAddress(place) {
if (!place) { if (!place) {
place = autocomplete.getPlace(); place = autocomplete.getPlace();
@ -297,6 +297,7 @@ export default {
if (place && place.address_components) { if (place && place.address_components) {
self.matchFound = true; self.matchFound = true;
self.addressModel.streetAddress = ""; self.addressModel.streetAddress = "";
self.$nextTick(function () { self.$nextTick(function () {
self.showAddressFields = true; self.showAddressFields = true;
@ -329,8 +330,6 @@ export default {
} }
} }
self.displayVerificationWarning = self.matchingIndirectly;
// after showing the address fields, disable the address autocomplete // after showing the address fields, disable the address autocomplete
window.google.maps.event.removeListener(autocompleteListener); window.google.maps.event.removeListener(autocompleteListener);
window.google.maps.event.clearInstanceListeners(autocomplete); window.google.maps.event.clearInstanceListeners(autocomplete);
@ -340,8 +339,6 @@ export default {
pacContainer.remove(); pacContainer.remove();
} }
}); });
} else {
self.displayVerificationWarning = true;
} }
} }
}) })
@ -357,6 +354,13 @@ export default {
watch: { watch: {
matchFound: { matchFound: {
handler(newValue) { handler(newValue) {
if (newValue === null) {
this.displayNoMatchWarning = false;
this.displayVerificationWarning = false;
this.unwatchAddress();
return;
}
if (!newValue) { if (!newValue) {
this.displayNoMatchWarning = true; this.displayNoMatchWarning = true;
@ -366,22 +370,18 @@ export default {
this.showAddressFields = true; this.showAddressFields = true;
this.displayVerificationWarning = false; this.displayVerificationWarning = false;
this.$nextTick(function () { // Only deep watch the Address Model after a failed match
// Only deep watch the Address Model after a failed match this.unwatchAddress = this.$watch(
this.isAddressWatchActive = true; "addressModel",
}); () => {
// When the address model changes reset to "no attempted match"
this.matchFound = null;
},
{ deep: true }
);
} }
}, },
}, },
addressModel: {
handler() {
if (this.isAddressWatchActive) {
this.displayNoMatchWarning = false;
this.isAddressWatchActive = false;
}
},
deep: true,
},
}, },
components: { components: {
textboxQuestion, textboxQuestion,