diff --git a/src/fmg-components/address-questions/address-questions.spec.js b/src/fmg-components/address-questions/address-questions.spec.js index d073c6bfc..f84f33377 100644 --- a/src/fmg-components/address-questions/address-questions.spec.js +++ b/src/fmg-components/address-questions/address-questions.spec.js @@ -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 diff --git a/src/fmg-components/address-questions/address-questions.vue b/src/fmg-components/address-questions/address-questions.vue index 0448e32d2..f4b6804df 100644 --- a/src/fmg-components/address-questions/address-questions.vue +++ b/src/fmg-components/address-questions/address-questions.vue @@ -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) {