WIP

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

@@ -45,7 +45,8 @@
                 @blur="handleChange"
                 :maxlength="maxLength ? maxLength : '999'"
                 @focus="$emit('focus', $event.target.value)"
-                @keydown="keyDownHandler" />
+                @keydown="keyDownHandler"
+                @animationstart="checkAnimation" />
             <button
                 v-if="includeSearchIcon"
                 type="submit"
@@ -130,6 +131,7 @@ export default {
             default: false,
             isRequired: false,
         },
+        autofilled: Boolean
     },
     setup(props) {
         const uuid = uuidv4();
@@ -178,6 +180,26 @@ export default {
             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];
 
@@ -222,6 +244,13 @@ export default {
     },
     mounted() {
         this.$emit("textboxQuestionEvent.inputIdAssigned", this.inputId);
+        // const element = document.querySelector(`#${this.inputId}`, null);
+
+        // element.addEventListener("change", () => {
+        //     this.$nextTick(() => {
+        //         console.log(window.getComputedStyle(element, ":-internal-autofill"));
+        //     });
+        // });
     },
     watch: {
         async value(newValue) {
@@ -347,5 +376,33 @@ export default {
     p {
         display: none;
     }
+
+    :-webkit-autofill {
+        animation-name: onAutoFillStart;
+    }
+    :-webkit-autofill:focus {
+        animation-name: onAutoFillSelected;
+    }
+    :not(:-webkit-autofill) {
+        animation-name: onAutoFillCancel;
+    }
+    @keyframes onAutoFillStart {
+        from {
+        }
+        to {
+        }
+    }
+    @keyframes onAutoFillSelected {
+        from {
+        }
+        to {
+        }
+    }
+    @keyframes onAutoFillCancel {
+        from {
+        }
+        to {
+        }
+    }
 }
 </style>

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

@@ -12,7 +12,8 @@
                     aria-haspopup=""
                     hasIcon
                     validationRules="street-address-required"
-                    @keydown.enter.prevent />
+                    @keydown.enter.prevent                  
+                    />
             </div>
         </div>
         <transition name="fade" mode="out-in">
@@ -25,7 +26,8 @@
                         customInputId="apartmentNumberOrBusinessName"
                         cmsWidgetName="ApartmentNumberOrBusinessNameQuestionWidget"
                         v-model="addressModel.apartmentNumberOrBusinessName"
-                        ref="apartmentNumberOrBusinessName" />
+                        ref="apartmentNumberOrBusinessName" 
+                        />
                 </div>
             </div>
         </transition>
@@ -37,7 +39,8 @@
                         cmsWidgetName="CityQuestionWidget"
                         v-model="addressModel.city"
                         ref="city"
-                        validationRules="city-required" />
+                        validationRules="city-required" 
+                        />
                 </div>
             </div>
         </transition>
@@ -50,7 +53,8 @@
                         v-model="addressModel.state"
                         ref="state"
                         :options="stateOptions"
-                        validationRules="state-required" />
+                        validationRules="state-required" 
+                        />
                 </div>
                 <div class="col">
                     <textboxQuestion
@@ -59,7 +63,8 @@
                         v-model="addressModel.zipCode"
                         ref="zipCode"
                         mask="#####"
-                        validationRules="zip-code-required|zip-code-format" />
+                        validationRules="zip-code-required|zip-code-format" 
+                        />
                 </div>
             </div>
         </transition>
@@ -119,6 +124,7 @@ export default {
             type: Boolean,
             default: false,
         },
+        //autofilled: Boolean,
     },
     data() {
         return {
@@ -222,6 +228,13 @@ 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, {
@@ -436,6 +449,9 @@ export default {
                 }
             },
         },
+        autofilled(value) {
+            console.log(value)
+        }
     },
     components: {
         textboxQuestion,

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

@@ -7,7 +7,8 @@
                 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">
@@ -17,7 +18,8 @@
                 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">
@@ -29,7 +31,8 @@
                 customInputId="emailAddress"
                 :isRequired="!isEmailOptional"
                 :validationRules="validationRules"
-                :addOptionalText="isEmailOptional" />
+                :addOptionalText="isEmailOptional"
+                :autofilled="autofilled" />
         </div>
     </div>
     <div class="row mb-0">
@@ -83,6 +86,25 @@ 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 () {
@@ -92,7 +114,7 @@ export default {
                 this.$emit("update:modelValue", newValue);
             },
         },
-    },
+        autofilled(value) {}    },
     components: {
         addressQuestions,
         textboxQuestion,