Merge pull request #1860 from Safelite/feature/CSR-2065

Feature/csr 2065
This commit is contained in:
Leah Schumann 2024-05-22 10:26:22 -04:00 committed by GitHub
commit b9873013c1
No known key found for this signature in database
GPG key ID: B5690EEEBB952194
2 changed files with 49 additions and 10 deletions

View file

@ -204,23 +204,23 @@ describe("address-questions.vue", () => {
test("address field is typed into => disable autofill", async () => {
// Arrange
let keydownEventCallbackFunction;
let inputEventCallbackFunction;
autocompleteElement.addEventListener = jest
.fn()
.mockImplementation((eventName, callbackFunction) => {
if (eventName == "keydown") {
keydownEventCallbackFunction = callbackFunction;
if (eventName == "input") {
inputEventCallbackFunction = callbackFunction;
}
});
const { wrapper } = setupMocks({});
await wrapper.vm.$nextTick();
const e = {
code: "Enter",
inputType: "insertText",
};
// Act
keydownEventCallbackFunction(e);
inputEventCallbackFunction(e);
await wrapper.vm.$nextTick();
// Assert

View file

@ -210,6 +210,15 @@ export default {
return document.getElementById("autocomplete");
},
},
isTouchDevice: {
get: function () {
return (
"ontouchstart" in window ||
navigator.maxTouchPoints > 0 ||
navigator.msMaxTouchPoints > 0
);
},
},
},
methods: {
loadGooglePlacesAutocompleteScript() {
@ -256,8 +265,8 @@ export default {
// 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");
// this.addressField1.setAttribute("autocomplete", "off");
// this.addressField1.setAttribute("autocomplete", "new-password");
// If a match has been previously attempted then do nothing
if (this.matchFound !== null) {
@ -269,6 +278,35 @@ export default {
window.google.maps.event.trigger(this.autocomplete, "place_changed");
}
});
// // When clicking anywhere outside of the street address field we want to trigger place_changed
// document.addEventListener("mouseup", (e) => {
// if (e.target.id != "autocomplete" && this.addressField1.value !== "") {
// window.google.maps.event.trigger(this.autocomplete, "place_changed");
// }
// });
this.addressField1.addEventListener("input", (e) => {
console.log(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.disableAutoFill();
break;
default:
// If the user enters text by *autofill* then disable the *autocomplete*
this.unloadAutocomplete();
}
});
},
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) {
const component = place.address_components.find((component) =>
@ -408,11 +446,12 @@ export default {
const element = document.getElementsByClassName("address-questions")[0];
element.addEventListener("change", (e) => {
if (this.showAddressFields) {
return false;
}
let autoFilledInputs = [];
autoFilledInputs = element.querySelectorAll("input:-webkit-autofill");
if (this.showAddressFields) {
return;
}
this.showAddressFields = autoFilledInputs.length > 0;
if (this.showAddressFields) {