Fix search_with_autocomplete double submit scenario

Our workaround for the `accessible-autocomplete` library hogging the
Enter key when the menu is open was too greedy, and also submitted the
form when the menu in fact wasn't open.

This adds a check to the workaround to ensure the menu is actually
shown, as the behaviour doesn't actually happen otherwise.

CHANGELOG.md

@@ -10,6 +10,7 @@
 ## Unreleased
 
 * Fix "sticky" GA4 search tracker `tool_name` ([PR #4422](https://github.com/alphagov/govuk_publishing_components/pull/4422))
+* Fix `search_with_autocomplete` double submit scenario ([PR #4421](https://github.com/alphagov/govuk_publishing_components/pull/4421))
 
 ## 45.6.0
 

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

@@ -64,11 +64,12 @@ window.GOVUK.Modules = window.GOVUK.Modules || {};
       // with the autocomplete menu at all, and then hits Enter to try to submit the form - but it
       // isn't submitted.
       //
-      // This manually triggers our form submission logic when the Enter key is pressed as a
-      // workaround (which will do nothing if the form is already in the process of submitting
-      // through `onConfirm` because the user has accepted a suggestion).
+      // This manually triggers our form submission logic when the Enter key is pressed while the
+      // dropdown is shown as a workaround (which will do nothing if the form is already in the
+      // process of submitting through `onConfirm` because the user has accepted a suggestion).
       this.$autocompleteInput.addEventListener('keydown', (e) => {
-        if (e.key === 'Enter') this.submitContainingForm()
+        const dropdownVisible = this.$autocompleteInput.getAttribute('aria-expanded') === 'true'
+        if (dropdownVisible && e.key === 'Enter') this.submitContainingForm()
       })
     }
 

spec/javascripts/components/search-with-autocomplete-spec.js

@@ -235,6 +235,25 @@ describe('Search with autocomplete component', () => {
     })
   })
 
+  it('does not trigger a requestSubmit if Enter is pressed and the menu is not shown', (done) => {
+    const form = fixture.querySelector('form')
+    const input = fixture.querySelector('input')
+    const submitSpy = spyOn(form, 'requestSubmit')
+
+    stubSuccessfulFetch([])
+    performInput(input, 'i just want to search once', () => {
+      const enterEvent = new KeyboardEvent('keydown', {
+        key: 'Enter',
+        bubbles: true,
+        cancelable: true
+      })
+      input.dispatchEvent(enterEvent)
+
+      expect(submitSpy).not.toHaveBeenCalled()
+      done()
+    })
+  })
+
   describe('analytics data attributes', () => {
     it('sets data attributes on the input when suggestions are returned', (done) => {
       const input = fixture.querySelector('input')