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

Feature/csr 2065

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"
+                :autocomplete="autocomplete" />
             <button
                 v-if="includeSearchIcon"
                 type="submit"
@@ -130,6 +131,7 @@ export default {
             default: false,
             isRequired: false,
         },
+        autocomplete: String,
     },
     setup(props) {
         const uuid = uuidv4();

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

@@ -13,6 +13,7 @@
                     aria-haspopup=""
                     hasIcon
                     validationRules="street-address-required"
+                    autocomplete="street-address"
                     @keydown.enter.prevent />
             </div>
         </div>
@@ -38,7 +39,8 @@
                         cmsWidgetName="CityQuestionWidget"
                         v-model="addressModel.city"
                         ref="city"
-                        validationRules="city-required" />
+                        validationRules="city-required"
+                        autocomplete="address-level2" />
                 </div>
             </div>
         </transition>
@@ -51,7 +53,8 @@
                         v-model="addressModel.state"
                         ref="state"
                         :options="stateOptions"
-                        validationRules="state-required" />
+                        validationRules="state-required"
+                        autocomplete="address-level1" />
                 </div>
                 <div class="col">
                     <textboxQuestion
@@ -60,7 +63,8 @@
                         v-model="addressModel.zipCode"
                         ref="zipCode"
                         mask="#####"
-                        validationRules="zip-code-required|zip-code-format" />
+                        validationRules="zip-code-required|zip-code-format"
+                        autocomplete="postal-code" />
                 </div>
             </div>
         </transition>
@@ -279,7 +283,8 @@ export default {
                         case "insertFromPaste":
                         case "deleteContentBackward":
                             // If the user enters text by typing, or pasting text, or deleting text already entered, disable *autofill*
-
+                            addressField.setAttribute("autocomplete", "off");
+                            addressField.setAttribute("autocomplete", "new-password");
                             break;
                         default:
                             if (addressField.id == "streetAddress") {

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

@@ -8,7 +8,8 @@
                     v-model="customerModel.firstName"
                     ref="firstName"
                     customInputId="firstName"
-                    validationRules="first-name-required" />
+                    validationRules="first-name-required"
+                    autocomplete="given-name" />
             </div>
         </div>
         <div class="row mb-4">
@@ -18,7 +19,8 @@
                     v-model="customerModel.lastName"
                     ref="lastName"
                     customInputId="lastName"
-                    validationRules="last-name-required" />
+                    validationRules="last-name-required"
+                    autocomplete="family-name" />
             </div>
         </div>
         <div class="row mt-4">
@@ -30,7 +32,8 @@
                     customInputId="emailAddress"
                     :isRequired="!isEmailOptional"
                     :validationRules="validationRules"
-                    :addOptionalText="isEmailOptional" />
+                    :addOptionalText="isEmailOptional"
+                    autocomplete="email" />
             </div>
         </div>
         <div class="row mb-0">