Merge pull request #728 from GSA/GSA/issue-597/state-tax-dropdown-update

Changed state tax dropdown to combo box

src/components/StateTaxSelection.astro

@@ -8,12 +8,13 @@ states.sort((a, b) => a.data.name.localeCompare(b.data.name));
 ---
 <label class="usa-label text-bold" for="ddlstates">{label} </label>
 <form id="state-tax-form" class="usa-form sp-inline-form margin-bottom-4">
-    <select class="usa-select sp-inline-form-input" name="ddlstates" id="ddlstates">
-      <option value="">Select a state</option>
-      {states.map(state => (
-         <option selected={state.data.name === current_state} value={state.slug}>{ state.data.name }</option>
-      ))}
-    </select>
+    <div class="usa-combo-box">
+        <select class="usa-select sp-inline-form-input" name="ddlstates" id="ddlstates">
+            {states.map(state => (
+                    <option selected={state.data.name === current_state} value={state.slug}>{ state.data.name }</option>
+            ))}
+        </select>
+    </div>
 
     <button class="usa-button sp-inline-form-submit-button" type="submit" aria-label="Go to selected state">Go</button>
 </form>
@@ -25,7 +26,8 @@ states.sort((a, b) => a.data.name.localeCompare(b.data.name));
         const state = dropdown.value;
 
         if (state) {
-            const target=`${base_url}smarttax/tax-information-by-state/${state.toLowerCase()}/`;
+            // Create State Tax URL, replaced spaces in the selected value with dash to match URL pattern and prevent URL encoding
+            const target=`${base_url}smarttax/tax-information-by-state/${state.replace(/\s+/g, '-').toLowerCase()}/`;
             window.location.href = target;
         }
     }