Merge pull request #5251 from alphagov/select-with-search-fix3

Change blank repeated "Select One" option to "Select None"

Author: matthillco

CHANGELOG.md

@@ -7,6 +7,10 @@
   useful summary for people upgrading their application, not a replication
   of the commit log.
 
+## Unreleased
+
+* Change blank repeated "Select One" option to "Select None" ([PR #5251](https://github.com/alphagov/govuk_publishing_components/pull/5251))
+
 ## 64.1.1
 
 * Make input search styles less specific ([PR #5282](https://github.com/alphagov/govuk_publishing_components/pull/5282))

app/assets/javascripts/govuk_publishing_components/components/select-with-search.js

@@ -13,6 +13,7 @@ window.GOVUK.Modules = window.GOVUK.Modules || {}
       return
     }
 
+    const blankOptionText = 'Select none'
     const placeholderOption = this.module.querySelector(
       'option[value=""]:first-child'
     )
@@ -42,6 +43,21 @@ window.GOVUK.Modules = window.GOVUK.Modules || {}
           const inner = this.containerInner.element
           const input = this.input.element
           inner.prepend(input)
+        } else {
+          // Update text for blank option in the hidden select
+          const selectElement = this.passedElement.element
+          if (selectElement.id.search('blank') > 0) {
+            selectElement.firstChild.innerText = blankOptionText
+          }
+          // Update text for blank option in the choices dropdown
+          // choices.js 'lastChild' in this context is the listbox of choices:
+          const listbox = this.dropdown.element.lastChild
+          // choices.js 'firstChild' in this context is the first option.
+          // This always displays "Select One" for selects with a blank option:
+          var blankOption = listbox.firstChild
+          if (blankOption && blankOption.id.search('blank') > 0) {
+            blankOption.innerText = blankOptionText
+          }
         }
         // Add aria-labelledby to the listbox as well as the combobox
         const listbox = this.itemList.element
@@ -54,6 +70,23 @@ window.GOVUK.Modules = window.GOVUK.Modules || {}
       }
     })
 
+    // Reset blank 'Select One' to 'Select None' on each change
+    // This is because choices.js rebuilds the widget on each
+    // change event and resets the text. We can't use the preferred
+    // refresh method as this loses the current state of the dropdown.
+    const selectElement = this.choices.passedElement.element
+    const listbox = this.choices.dropdown.element.lastChild
+    selectElement.addEventListener(
+      'change',
+      function (event) {
+        var blankOption = listbox.firstChild
+        if (blankOption && blankOption.id.search('blank') > 0) {
+          blankOption.innerText = blankOptionText
+        }
+      },
+      false
+    )
+
     this.module.choices = this.choices
   }