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

Feature/csr 2065

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") {
+                    if (eventName == "input") {
-                        keydownEventCallbackFunction = callbackFunction;
+                        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

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", "off");
-                this.addressField1.setAttribute("autocomplete", "new-password");
+                // 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) {