fix/issue-434/filters-reset (#436)

* Reset to default selected option if true and to index 0 if false
digitalnsw · Jul 17, 2024 · 0fa4b5d · 0fa4b5d
1 parent b62bd57
commit 0fa4b5d
Show file tree

Hide file tree

Showing 3 changed files with 17 additions and 4 deletions.
diff --git a/src/components/filters/_filters.hbs b/src/components/filters/_filters.hbs
@@ -38,7 +38,7 @@
         </button>{{/if}}
         <div class="nsw-filters__item-content">
           <label class="nsw-form__label{{#if collapsed}} sr-only{{/if}}" for="{{select.id}}-{{filters-id}}">{{select.name}}</label>{{#if multiple}}
-          <div class="nsw-multi-select js-multi-select" data-no-select-text="Select savings programs" data-multi-select-text="{n} items selected" data-n-multi-select="2">{{/if}}
+          <div class="nsw-multi-select js-multi-select" data-select-text="Select regions" data-multi-select-text="{n} regions selected" data-n-multi-select="2">{{/if}}
           <select{{#unless multiple}} class="nsw-form__select"{{/unless}} name="{{select.id}}-{{filters-id}}" id="{{select.id}}-{{filters-id}}"{{#if helper-text}} aria-describedby="{{#if helper-text}}{{select.id}}-{{filters-id}}-helper-text{{/if}}"{{/if}}{{#if error-text}} aria-invalid="true"{{/if}}{{#if multiple}} multiple{{/if}}>{{#unless multiple}}<option value="">Please select</option>{{/unless}}
           {{#each select.list}}
             <option value="{{this}}">{{this}}</option>

diff --git a/src/components/filters/filters.js b/src/components/filters/filters.js
@@ -36,6 +36,8 @@ class Filters {
     this.showMoreContent = this.element.querySelectorAll(`.${this.prefix}${this.allClass}`)
     this.showMoreButtons = this.element.querySelectorAll(`.${this.prefix}${this.moreClass}`)
     this.focusableElements = 'a[href]:not([disabled]), button:not([disabled]), textarea:not([disabled]), input[type="text"]:not([disabled]), input[type="radio"]:not([disabled]), input[type="checkbox"]:not([disabled]), select:not([disabled])'
+    // Get default selected option
+    this.selectedOption = this.element.querySelector('option[selected]')
     // Accordion arrays
     this.buttons = []
     this.content = []
@@ -208,11 +210,22 @@ class Filters {
     if (this.options.length > 0) {
       this.options.forEach((input) => {
         const option = input
-        if (option.type === 'text' || option.type === 'select-one') {
+        if (option.type === 'text') {
           option.value = ''
+        } else if (option.type === 'select-one') {
+          if (this.selectedOption) {
+            option.selectedIndex = this.selectedOption.index
+          } else {
+            option.selectedIndex = 0
+          }
+        } else if (option.type === 'checkbox') {
+          if (option.defaultChecked) {
+            option.checked = true
+          } else {
+            option.checked = false
+          }
         } else if (!option.parentElement.classList.contains('js-multi-select__option')) {
           option.value = false
-          option.checked = false
         }
       })
     }

diff --git a/src/components/select/test.hbs b/src/components/select/test.hbs
@@ -59,7 +59,7 @@ model:
           </button>
           <div class="nsw-filters__item-content">
             <label class="nsw-form__label sr-only" for="filters-instant-regions-8">Region</label>
-            <div class="nsw-multi-select js-multi-select" data-no-select-text="Select savings programs" data-multi-select-text="{n} items selected" data-n-multi-select="2">
+            <div class="nsw-multi-select js-multi-select" data-select-text="Select regions" data-multi-select-text="{n} regions selected" data-n-multi-select="2">
             <select name="filters-instant-regions-8" id="filters-instant-regions-8" multiple>
               <option value="Central Coast" selected="true">Central Coast</option>
               <option value="Central West &amp; Orana">Central West &amp; Orana</option>