Merge pull request #1940 from usagov/USAGOV-1548-CEO-STATE-AND-COUNTRY

Usagov 1548 ceo state and country
usagov · Oct 4, 2024 · 4fb2c91 · 4fb2c91
2 parents ac39052 + 15be779
commit 4fb2c91
Show file tree

Hide file tree

Showing 4 changed files with 21 additions and 9 deletions.
diff --git a/web/themes/custom/usagov/scripts/accessibility.js b/web/themes/custom/usagov/scripts/accessibility.js
@@ -219,7 +219,6 @@ async function handleFormSubmission() {
     const stateField = document.getElementById("input-state");
     const zipCodeField = document.getElementById("input-zip");
     const formFields = [streetAddressField, cityField, stateField, zipCodeField];
-
     // Analyze the response and decide if the address is valid or not.
     const uspsApiResponse = await addressUSPSValidation(streetAddressField.value, cityField.value, stateField.value, zipCodeField.value);
     const response = uspsResponseParser(uspsApiResponse, streetAddressField.value, cityField.value, zipCodeField.value);
@@ -374,16 +373,27 @@ window.addEventListener("load", function () {
     "use strict";
 
     let clearButtonWrappers = document.getElementsByClassName("usa-combo-box__clear-input__wrapper");
-    for (let i = 0; i < clearButtonWrappers.length; i++) {
-        clearButtonWrappers[i].remove();
+    for (const clearButtonWrapper of clearButtonWrappers) {
+        clearButtonWrapper.remove();
     }
 
     // Include the dropdown menu's toggle button in the tab order
     let toggleButtons = document.getElementsByClassName("usa-combo-box__toggle-list");
-    for (let i = 0; i < toggleButtons.length; i++) {
-        toggleButtons[i].removeAttribute("tabindex");
+    for (const toggleButton of toggleButtons) {
+        toggleButton.removeAttribute("tabindex");
     }
 
+
+    // Code for autocomplete state fields
+    let isChromeOrEdge = navigator.userAgent.includes("Chrome");
+    // Change attributes so that autofill works in state input
+    if (isChromeOrEdge) {
+        let stateSelectBox = document.getElementsByName("select-dropdown")[0];
+        stateSelectBox.setAttribute("autocomplete","country");
+
+        let stateInputBox = document.getElementById("input-state");
+        stateInputBox.setAttribute("autocomplete","address-level1");
+    }
 });
 
 (function() {

diff --git a/web/themes/custom/usagov/scripts/lookup.js b/web/themes/custom/usagov/scripts/lookup.js
@@ -483,9 +483,9 @@ function load() {
 
     let inputStreet = searchParams.get('input-street');
     let inputCity = searchParams.get('input-city');
-    let inputState = searchParams.get('input-state');
-    let inputZip = searchParams.get('input-zip');
+    let inputState = searchParams.get('select-dropdown');
 
+    let inputZip = searchParams.get('input-zip');
     let normalizedAddress = inputStreet + ", " + inputCity + ", " + inputState + " " + inputZip;
     let displayAddress = document.getElementById("display-address");
     displayAddress.innerHTML = DOMPurify.sanitize(normalizedAddress.replace(", ", "<br>"));

diff --git a/...ustom/usagov/templates/field--node--field-custom-twig-content-elected-officials.html.twig b/...ustom/usagov/templates/field--node--field-custom-twig-content-elected-officials.html.twig
@@ -85,8 +85,9 @@
               <select
                 aria-describedby="state"
                 class="usa-select"
-                name="input-state"
+                name="select-dropdown"
                 id="input-state"
+                autocomplete="off"
                 required
                 oninvalid="this.setCustomValidity('Fill out the state field.')"
                 oninput="this.setCustomValidity('')">

diff --git a/...om/usagov/templates/field--node--field-custom-twig-content-funcionarios-electos.html.twig b/...om/usagov/templates/field--node--field-custom-twig-content-funcionarios-electos.html.twig
@@ -56,9 +56,10 @@
                   <select
                     aria-describedby="state"
                     class="usa-select"
-                    name="input-state"
+                    name="select-dropdown"
                     id="input-state"
                     required
+                    autocomplete="off"
                     oninvalid="this.setCustomValidity('Fill out the state field.')"
                     oninput="this.setCustomValidity('')">
                     <option id="AL" value="AL">Alabama (AL)</option>