Refactor javascript

Update javascript code so accessible autocomplete component is reusable

app/javascript/src/accessible-autocomplete.js

@@ -1,48 +1,51 @@
 import accessibleAutocomplete from 'accessible-autocomplete'
 
 const screenReaderMessageDelay = 1000 // wait before updating the screen reader message, to avoid interrupting queue
-const searchSelectItem = document.querySelector('.country-select')
 
-function enhanceSelectElement (searchSelectItem) {
+function enhanceSelectElement (autocompleteComponent) {
+  const searchSelectItem = autocompleteComponent.querySelector('.country-select')
+  const clearSearchButton = autocompleteComponent.querySelector('.clear-search')
+  const selectName = searchSelectItem.getAttribute('name')
+
   accessibleAutocomplete.enhanceSelectElement({
     defaultValue: '',
     selectElement: searchSelectItem,
     inputClasses: 'govuk-input',
-    name: 'country'
+    name: selectName
   })
 
-  addSearchInputListeners()
+  addSearchInputListeners(autocompleteComponent, clearSearchButton)
 
-  if (document.querySelector('#non-uk-home-address-country-code-error')) {
-    addErrorClasses()
+  if (autocompleteComponent.querySelector('.govuk-error-message')) {
+    addErrorClasses(autocompleteComponent, clearSearchButton)
   }
 }
 
-function addSearchInputListeners () {
-  const searchInputBox = document.querySelector('.autocomplete__input')
-
-  document.querySelector('.clear-search').classList.remove('hidden')
+function addSearchInputListeners (autocompleteComponent, clearSearchButton) {
+  const searchInputBox = autocompleteComponent.querySelector('.autocomplete__input')
+  clearSearchButton.classList.remove('hidden')
 
-  document
-    .querySelector('#clear-country-search')
+  clearSearchButton
     .addEventListener('click', (event) => {
       event.preventDefault()
       searchInputBox.value = ''
-      clearSearch()
-      setTimeout(() => { document.querySelector('#screen-reader-messages').innerHTML = 'Search box has been cleared.' }, screenReaderMessageDelay)
+      clearSearch(autocompleteComponent)
+      setTimeout(() => { autocompleteComponent.querySelector('.screen-reader-messages').innerHTML = 'Search box has been cleared.' }, screenReaderMessageDelay)
     })
 }
 
-function clearSearch () {
-  const selectedItem = document.querySelector('.country-select option[selected]')
+function clearSearch (autocompleteComponent) {
+  const selectedItem = autocompleteComponent.querySelector('.country-select option[selected]')
   if (selectedItem) selectedItem.removeAttribute('selected')
 }
 
-function addErrorClasses () {
-  document.querySelector('.autocomplete__input').classList.add('govuk-input--error')
-  document.querySelector('.clear-search').classList.add('clear-search-error')
+function addErrorClasses (autocompleteComponent, clearSearchButton) {
+  autocompleteComponent.querySelector('.autocomplete__input').classList.add('govuk-input--error')
+  clearSearchButton.classList.add('clear-search-error')
 }
 
 document.addEventListener('DOMContentLoaded', () => {
-  if (searchSelectItem) enhanceSelectElement(searchSelectItem)
+  const autocompleteComponent = document.querySelector('.autocomplete-component')
+
+  if (autocompleteComponent) enhanceSelectElement(autocompleteComponent)
 })

app/views/providers/home_address/non_uk_home_addresses/show.html.erb

@@ -11,11 +11,10 @@
         form:,
       ) do %>
 
-    <div id="screen-reader-messages" class="govuk-visually-hidden" aria-live="polite" aria-atomic="true" role="alert"></div>
-
     <%= hidden_field_tag "legal-framework-api-host", nil, { "data-uri": Rails.configuration.x.legal_framework_api_host_for_js } %>
 
-    <div class="govuk-grid-row">
+    <div class="govuk-grid-row autocomplete-component">
+      <div class="govuk-visually-hidden screen-reader-messages" aria-live="polite" aria-atomic="true" role="alert"></div>
       <div class="govuk-grid-column-two-thirds govuk-list">
         <%= form.govuk_collection_select :country_code,
                                          @form.countries,
@@ -26,7 +25,7 @@
                                          label: { text: "Country", size: "m" } %>
       </div>
       <div class="govuk-grid-column-one-third clear-search hidden">
-        <p class="govuk-body"><%= govuk_link_to t(".clear_search"), "#", id: "clear-country-search" %></p>
+        <p class="govuk-body"><%= govuk_link_to t(".clear_search"), "#" %></p>
       </div>
     </div>