Checkpoint

src/digital-components/textbox-question/textbox-question.vue

@@ -45,8 +45,7 @@
                 @blur="handleChange"
                 :maxlength="maxLength ? maxLength : '999'"
                 @focus="$emit('focus', $event.target.value)"
-                @keydown="keyDownHandler"
+                @keydown="keyDownHandler" />
-                @animationstart="checkAnimation" />
             <button
                 v-if="includeSearchIcon"
                 type="submit"
@@ -131,7 +130,6 @@ export default {
             default: false,
             isRequired: false,
         },
-        autofilled: Boolean
     },
     setup(props) {
         const uuid = uuidv4();
@@ -176,30 +174,10 @@ export default {
     },
     methods: {
         focusSearchInput() {
-            //Focus cursor in input when search icon is clicked
+            // Focus cursor in input when search icon is clicked
             const field = document.querySelector("input");
             field.focus();
         },
-        checkAnimation(e) {
-            // if(e.animationName == "onAutoFillStart")
-            // {
-            //     console.log("onAutoFillStart")
-            //     //this.autofilled = true;
-            // }
-            if(e.animationName == "onAutoFillSelected")
-            {
-                //console.log("onAutoFillSelected")
-                this.$emit("autofilled", { inputId: this.inputId, autofilled: true});
-                
-            }
-            else if(e.animationName == "onAutoFillCancel")
-            {
-                //console.log("onAutoFillCancel")
-                this.$emit("autofilled", { inputId: this.inputId, autofilled: false});
-                
-            }
-
-        },       
         async imageChanged(e) {
             let file = e.target.files[0];
 

src/fmg-components/address-questions/address-questions.vue

@@ -12,8 +12,7 @@
                     aria-haspopup=""
                     hasIcon
                     validationRules="street-address-required"
-                    @keydown.enter.prevent                  
+                    @keydown.enter.prevent />
-                    />
             </div>
         </div>
         <transition name="fade" mode="out-in">
@@ -26,8 +25,7 @@
                         customInputId="apartmentNumberOrBusinessName"
                         cmsWidgetName="ApartmentNumberOrBusinessNameQuestionWidget"
                         v-model="addressModel.apartmentNumberOrBusinessName"
-                        ref="apartmentNumberOrBusinessName" 
+                        ref="apartmentNumberOrBusinessName" />
-                        />
                 </div>
             </div>
         </transition>
@@ -39,8 +37,7 @@
                         cmsWidgetName="CityQuestionWidget"
                         v-model="addressModel.city"
                         ref="city"
-                        validationRules="city-required" 
+                        validationRules="city-required" />
-                        />
                 </div>
             </div>
         </transition>
@@ -53,8 +50,7 @@
                         v-model="addressModel.state"
                         ref="state"
                         :options="stateOptions"
-                        validationRules="state-required" 
+                        validationRules="state-required" />
-                        />
                 </div>
                 <div class="col">
                     <textboxQuestion
@@ -63,8 +59,7 @@
                         v-model="addressModel.zipCode"
                         ref="zipCode"
                         mask="#####"
-                        validationRules="zip-code-required|zip-code-format" 
+                        validationRules="zip-code-required|zip-code-format" />
-                        />
                 </div>
             </div>
         </transition>
@@ -124,7 +119,6 @@ export default {
             type: Boolean,
             default: false,
         },
-        //autofilled: Boolean,
     },
     data() {
         return {
@@ -228,13 +222,6 @@ export default {
                 this.initializeAutocomplete();
             });
         },
-        setAutofilled(value) {
-            console.log(value)
-            if (value.autofilled) {
-                this.showAddressFields = true;
-            }
-            this.$emit("autofilled", value);
-        },
         initializeAutocomplete() {
             // Initialize the Google Places Autocomplete
             this.autocomplete = new window.google.maps.places.Autocomplete(this.addressField1, {
@@ -264,6 +251,11 @@ export default {
 
                 // Unfortunately this is the only place we can set the autocomplete attribute without the
                 // Google Places object resetting it to "off" which does nothing to prevent browser autofill
+                //this.addressField1.setAttribute("autocomplete", "do-not-autofill");
+            });
+
+            // When the user starts entering text into Street Address textbox disable autofill
+            this.addressField1.addEventListener("input", (e) => {
                 this.addressField1.setAttribute("autocomplete", "do-not-autofill");
             });
 
@@ -411,6 +403,15 @@ export default {
         if (!this.showAddressFields) {
             this.loadGooglePlacesAutocompleteScript();
         }
+
+        const element = document.getElementsByClassName("address-questions")[0];
+        element.addEventListener("change", (e) => {
+            const inputs = element.querySelectorAll("input:-internal-autofill-selected");
+            this.showAddressFields = inputs.length > 0;
+            // if (this.showAddressFields) {
+            //     this.unloadAutocomplete();
+            // }
+        });
     },
     unmounted() {
         this.unloadAutocomplete();
@@ -448,10 +449,8 @@ export default {
                     );
                 }
             },
+            deep: true,
         },
-        autofilled(value) {
-            console.log(value)
-        }
     },
     components: {
         textboxQuestion,

src/layouts/address-lookup/address-lookup.vue

@@ -5,7 +5,7 @@
         ref="theForm"
         v-slot="{ meta }"
         autocomplete="off">
-        <div class="container-fluid page-container-grouped-styles">
+        <div class="container-fluid page-container-grouped-styles" id="address-lookup">
             <div class="row justify-content-center">
                 <div class="col-md-6">
                     <funnelHeader cmsWidgetName="FunnelHeaderWidget" ref="funnelHeader" />
@@ -25,7 +25,6 @@
                         v-model="customerQuestions"
                         :validationRules="EmailValidationRules"
                         :isEmailOptional="IsEmailOptional" />
-
                     <alert
                         ref="alertVinNotFound"
                         v-if="displayVinNotFoundAlert"

src/layouts/address-lookup/customer-questions/customer-questions.vue

@@ -1,4 +1,5 @@
 <template>
+    <div class="customer-questions">
         <addressQuestions ref="addressQuestions" v-model="customerModel.addressQuestions" />
         <div class="row mb-4">
             <div class="col">
@@ -7,8 +8,7 @@
                     v-model="customerModel.firstName"
                     ref="firstName"
                     customInputId="firstName"
-                validationRules="first-name-required"
+                    validationRules="first-name-required" />
-                @autofilled="setAutofilled"/>
             </div>
         </div>
         <div class="row mb-4">
@@ -18,8 +18,7 @@
                     v-model="customerModel.lastName"
                     ref="lastName"
                     customInputId="lastName"
-                validationRules="last-name-required" 
+                    validationRules="last-name-required" />
-                @autofilled="setAutofilled"/>
             </div>
         </div>
         <div class="row mt-4">
@@ -31,8 +30,7 @@
                     customInputId="emailAddress"
                     :isRequired="!isEmailOptional"
                     :validationRules="validationRules"
-                :addOptionalText="isEmailOptional"
+                    :addOptionalText="isEmailOptional" />
-                :autofilled="autofilled" />
             </div>
         </div>
         <div class="row mb-0">
@@ -40,6 +38,7 @@
                 <textBlock cmsWidgetName="QuoteEmailTextBlockWidget" typeStyle="caption" />
             </div>
         </div>
+    </div>
 </template>
 
 <script>
@@ -86,25 +85,6 @@ export default {
         validationRules: String,
         isEmailOptional: Boolean,
     },
-    data() {
-        return {
-            autofilled: false,
-        }
-    },
-    methods: {
-        setAutofilled(value) {
-            console.log(value)
-            if (value.autofilled === true) {
-                this.autofilled = true;
-                console.log("autofilled")
-            }
-            else {
-                this.autofilled = false;
-                console.log("not autofilled")
-            }
-            
-        }
-    },
     computed: {
         customerModel: {
             get: function () {
@@ -114,7 +94,7 @@ export default {
                 this.$emit("update:modelValue", newValue);
             },
         },
-        autofilled(value) {}    },
+    },
     components: {
         addressQuestions,
         textboxQuestion,