Make autocomplete arrow button work

There's an [ongoing issue][1] with the accessible autocomplete that
stops the arrow from opening the options menu when `showAllValues: true`
is enabled. The `showAllValues: true` option shows all values when
focused on the autocomplete element without having typed anything

I tried getting this to work in Capybara with Selenium in
`granting_permissions_test.rb` and `account_applications_test.rb`, but
the click event listener on the arrow is making it a challenge to
click on it in a test. Per the Jasmine test, you need to dispatch a
click event rather than just using the `click()` method directly. I
tried doing this in the Capybara test with `execute_script` and various
other methods, but couldn't get the right results

Instead, I've opted for a small single function Jasmine test

This also hides the arrow when the autocomplete input is focused.
Initially I wanted to make the arrow stay but have it toggle the menu,
but I was trying to do this by checking whether the input was the active
element, and it's no longer the active element once you click on the
arrow! I didn't want to get into storing state in a variable, as there's
too much under the hood autocomplete functionality that would affect
visibility and therefore make the conditional logic complicated

[1]: alphagov/accessible-autocomplete#202

app/assets/javascripts/modules/accessible-autocomplete.js

@@ -23,13 +23,23 @@ window.GOVUK.Modules = window.GOVUK.Modules || {}
     new window.accessibleAutocomplete.enhanceSelectElement(configOptions) // eslint-disable-line no-new, new-cap
 
     const autocompleteElement = selectElement.parentNode.querySelector('.autocomplete__input')
+    enableArrow(autocompleteElement)
     resetSelectWhenDesynced(selectElement, autocompleteElement)
     enableClearButton(selectElement, autocompleteElement)
   }
 
   Modules.AccessibleAutocomplete = AccessibleAutocomplete
 })(window.GOVUK.Modules)
 
+function enableArrow (autocompleteElement) {
+  const arrowElement = autocompleteElement.parentNode.querySelector('.autocomplete__dropdown-arrow-down')
+
+  arrowElement.addEventListener('click', function () {
+    autocompleteElement.click()
+    autocompleteElement.focus()
+  })
+}
+
 function resetSelectWhenDesynced (selectElement, autocompleteElement) {
   // if the autocomplete element's value no longer matches the selected option
   // in the select element, reset the select element - in particular, this

app/assets/stylesheets/components/_accessible-autocomplete.scss

@@ -12,6 +12,14 @@
   z-index: 0;
 }
 
+.autocomplete__input--focused + .autocomplete__dropdown-arrow-down {
+  display: none;
+}
+
+.autocomplete__dropdown-arrow-down {
+  cursor: pointer;
+}
+
 // This ensures the empty option is the same height as the options with values
 .autocomplete__option {
   min-height: 1rem;

spec/javascripts/modules/accessible-autocomplete-dropdown-spec.js

@@ -0,0 +1,46 @@
+describe('GOVUK.Modules.AccessibleAutocomplete', function () {
+  let component, module
+
+  beforeEach(async function () {
+    component = document.createElement('div')
+    component.setAttribute('data-module', 'accessible-autocomplete')
+    component.innerHTML = `
+      <label class="govuk-label govuk-label--m" for="new_permission_id">Add a permission</label>
+      <div id="hint-1234" class="gem-c-hint govuk-hint">
+        Search for the permission you want to add.
+        <select name="application[new_permission_id]" id="new_permission_id" class="govuk-select" aria-describedby="hint-1234">
+          <option value=""></option>
+          <option value="1">permission-1</option>
+          <option value="2">permission-2</option>
+          <option value="3">permission-3</option>
+          <option value="4">permission-4</option>
+          <option value="5">permission-5</option>
+          <option value="6">permission-6</option>
+          <option value="7">permission-7</option>
+          <option value="8">permission-8</option>
+          <option value="9">permission-9</option>
+        </select>
+      </div>
+    `
+    module = new GOVUK.Modules.AccessibleAutocomplete(component)
+    module.init()
+  })
+
+  it('opens the menu when clicking the arrow', async function () {
+    const menuElement = component.querySelector('.autocomplete__menu')
+    const menuElementClassesBefore = Array.from(menuElement.classList)
+    expect(menuElementClassesBefore.includes('autocomplete__menu--visible')).toBe(false)
+    expect(menuElementClassesBefore.includes('autocomplete__menu--hidden')).toBe(true)
+
+    const arrowElement = component.querySelector('.autocomplete__dropdown-arrow-down')
+    arrowElement.dispatchEvent(new Event('click'))
+
+    await wait()
+
+    const menuElementClassesAfter = Array.from(menuElement.classList)
+    expect(menuElementClassesAfter.includes('autocomplete__menu--visible')).toBe(true)
+    expect(menuElementClassesAfter.includes('autocomplete__menu--hidden')).toBe(false)
+  })
+})
+
+const wait = async () => await new Promise(resolve => setTimeout(resolve, 100))