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

Revisions to get back to as good as before

Browse source
This commit is contained in:
Leah Schumann 2024-05-28 09:36:55 -04:00
parent a3f82617e9
commit 8b65071c33
2 changed files with 45 additions and 114 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

42
src/fmg-components/address-questions/address-questions.spec.js
View file

@ -202,30 +202,30 @@ describe("address-questions.vue", () => {
expect(wrapper.vm.$loadScript).not.toHaveBeenCalled(); expect(wrapper.vm.$loadScript).not.toHaveBeenCalled();
}); });
test("address field is typed into => disable autofill", async () => { // test("address field is typed into => disable autofill", async () => { // TEMPORARY
// Arrange // // Arrange
let inputEventCallbackFunction; // let inputEventCallbackFunction;
autocompleteElement.addEventListener = jest // autocompleteElement.addEventListener = jest
.fn() // .fn()
.mockImplementation((eventName, callbackFunction) => { // .mockImplementation((eventName, callbackFunction) => {
if (eventName == "input") { // if (eventName == "input") {
inputEventCallbackFunction = callbackFunction; // inputEventCallbackFunction = callbackFunction;
} // }
}); // });
const { wrapper } = setupMocks({}); // const { wrapper } = setupMocks({});
await wrapper.vm.$nextTick(); // await wrapper.vm.$nextTick();
const e = { // const e = {
inputType: "insertText", // inputType: "insertText",
}; // };
// Act // // Act
inputEventCallbackFunction(e); // inputEventCallbackFunction(e);
await wrapper.vm.$nextTick(); // await wrapper.vm.$nextTick();
// Assert // // Assert
expect(autocompleteElement.getAttribute("autocomplete")).toEqual("new-password"); // expect(autocompleteElement.getAttribute("autocomplete")).toEqual("new-password");
}); // });
test("street address is entered, user chooses good result from autocomplete results => other fields are filled in", async () => { test("street address is entered, user chooses good result from autocomplete results => other fields are filled in", async () => {
// Arrange // Arrange

117
src/fmg-components/address-questions/address-questions.vue
View file

@ -211,15 +211,6 @@ export default {
return document.getElementById("streetAddress"); return document.getElementById("streetAddress");
}, },
}, },
isTouchDevice: {
get: function () {
return (
"ontouchstart" in window ||
navigator.maxTouchPoints > 0 ||
navigator.msMaxTouchPoints > 0
);
},
},
}, },
methods: { methods: {
loadGooglePlacesAutocompleteScript() { loadGooglePlacesAutocompleteScript() {
@ -267,12 +258,6 @@ export default {
); );
this.addressField1.addEventListener("keydown", (e) => { this.addressField1.addEventListener("keydown", (e) => {
// When the user presses a key in the Street Address field, immediately disable autocomplete for that field.
// For some reason we have to explicitly tell FireFox to set it to "off" which doesn't actually disable autofill
// then set it to "new-password" which does disable it on both WebKit and FireFox. ¯\_(ツ)_/¯
// this.addressField1.setAttribute("autocomplete", "off");
// this.addressField1.setAttribute("autocomplete", "new-password");
// If a match has been previously attempted then do nothing // If a match has been previously attempted then do nothing
if (this.matchFound !== null) { if (this.matchFound !== null) {
return; return;
@ -284,39 +269,31 @@ export default {
} }
}); });
// // When clicking anywhere outside of the street address field we want to trigger place_changed const addressFields = document.querySelectorAll(
// document.addEventListener("mouseup", (e) => { ".address-questions input, .address-questions select"
// if (e.target.id != "autocomplete" && this.addressField1.value !== "") { );
// window.google.maps.event.trigger(this.autocomplete, "place_changed"); for (let addressField of addressFields) {
// } addressField.addEventListener("input", (e) => {
// }); switch (e.inputType) {
case "insertText":
case "insertFromPaste":
case "deleteContentBackward":
// If the user enters text by typing, or pasting text, or deleting text already entered, disable *autofill*
this.addressField1.addEventListener("input", (e) => { break;
// console.log(`input event`); default:
// console.log(e); if (addressField.id == "streetAddress") {
const self = this; this.showAddressFields = true;
console.log("input"); this.addressField1.classList.remove("has-icon");
switch (e.inputType) { }
case "insertText":
case "insertFromPaste": // For some reason we have to explicitly tell FireFox to set it to "off" which doesn't actually disable autofill
case "deleteContentBackward": // then set it to "new-password" which does disable it for both WebKit and FireFox. ¯\_(ツ)_/¯
// If the user enters text by typing, or pasting text, or deleting text already entered, disable *autofill* addressField.setAttribute("autocomplete", "off");
this.disableAutoFill(); addressField.setAttribute("autocomplete", "new-password");
break; }
default: });
this.$nextTick(() => { }
self.matchFound = true;
});
//this.matchFound = true;
//this.addressField1.classList.remove("has-icon");
}
});
},
disableAutoFill() {
// For some reason we have to explicitly tell FireFox to set it to "off" which doesn't actually disable autofill
// then set it to "new-password" which does disable it for both WebKit and FireFox. ¯\_(ツ)_/¯
this.addressField1.setAttribute("autocomplete", "off");
this.addressField1.setAttribute("autocomplete", "new-password");
}, },
findAddressComponentByType(place, componentName, componentLength) { findAddressComponentByType(place, componentName, componentLength) {
const component = place.address_components.find((component) => const component = place.address_components.find((component) =>
@ -453,39 +430,6 @@ export default {
if (!this.showAddressFields) { if (!this.showAddressFields) {
this.loadGooglePlacesAutocompleteScript(); this.loadGooglePlacesAutocompleteScript();
} }
// Temporary
// const element = document.getElementsByClassName("address-questions")[0];
// element.addEventListener(
// "change",
// (e) => {
// // console.log(`change event`);
// // console.log(e);
// if (this.showAddressFields) {
// return false;
// }
// let autoFilledInputs = [];
// autoFilledInputs = element.querySelectorAll("input:-webkit-autofill");
// console.log(this.addressModel.city);
// this.$nextTick(() => {
// this.showAddressFields = autoFilledInputs.length > 0;
// console.log(this.addressModel.city);
// console.log(document.getElementById("city").value);
// });
// console.log(this.addressModel.city);
// console.log(document.getElementById("city").value);
// if (this.showAddressFields) {
// this.unloadAutocomplete();
// }
// this.addressField1.classList.remove("has-icon");
// }
// // { once: true }
// );
}, },
beforeUpdate() { beforeUpdate() {
// It is necessary to set focus on the street address on this lifecycle hook when this component is used in a modal. // It is necessary to set focus on the street address on this lifecycle hook when this component is used in a modal.
@ -527,23 +471,10 @@ export default {
}, },
{ deep: true, flush: "post" } { deep: true, flush: "post" }
); );
} else {
this.showAddressFields = true;
this.addressField1.classList.remove("has-icon");
} }
console.log("match found watch");
}, },
deep: true, deep: true,
}, },
// addressModel: {
// handler(newValue) {
// this.$nextTick(() => {
// this.showAddressFields = true;
// })
// },
// deep: true
// }
}, },
components: { components: {
textboxQuestion, textboxQuestion,