Set debounceFormSubmitTimer at instance level instead of global

CHANGELOG.md

@@ -508,6 +508,13 @@
 
 [compatibility mode]: https://github.com/alphagov/govuk-frontend/blob/master/docs/installation/installing-with-npm.md#compatibility-mode
 
+- Allow distinct buttons with `prevent-double-click` enabled to be clicked subsequently within one second
+
+  For buttons with `prevent-double-click` enabled we set the `debounceFormSubmitTimer` for each instance, so a specific action is stopped from being called multiple times without interfering with other submit buttons on the page.
+
+  ([PR #1370](https://github.com/alphagov/govuk-frontend/pull/1370))
+
+
 ## 2.11.0 (Feature release)
 
 🆕 New features:

src/components/button/button.js

@@ -1,11 +1,12 @@
 import '../../vendor/polyfills/Event' // addEventListener and event.target normaliziation
+import '../../vendor/polyfills/Function/prototype/bind'
 
 var KEY_SPACE = 32
 var DEBOUNCE_TIMEOUT_IN_SECONDS = 1
-var debounceFormSubmitTimer = null
 
 function Button ($module) {
   this.$module = $module
+  this.debounceFormSubmitTimer = null
 }
 
 /**
@@ -41,14 +42,14 @@ Button.prototype.debounce = function (event) {
   }
 
   // If the timer is still running then we want to prevent the click from submitting the form
-  if (debounceFormSubmitTimer) {
+  if (this.debounceFormSubmitTimer) {
     event.preventDefault()
     return false
   }
 
-  debounceFormSubmitTimer = setTimeout(function () {
-    debounceFormSubmitTimer = null
-  }, DEBOUNCE_TIMEOUT_IN_SECONDS * 1000)
+  this.debounceFormSubmitTimer = setTimeout(function () {
+    this.debounceFormSubmitTimer = null
+  }.bind(this), DEBOUNCE_TIMEOUT_IN_SECONDS * 1000)
 }
 
 /**

src/components/button/button.test.js

@@ -102,6 +102,34 @@ describe('/components/button', () => {
 
         const submitCount = await page.evaluate(() => window.__SUBMIT_EVENTS)
 
+        expect(submitCount).toBe(2)
+      })
+      it('does not prevent subsequent clicks on different buttons', async () => {
+        await page.goto(baseUrl + '/components/button/prevent-double-click/preview', { waitUntil: 'load' })
+
+        // Our examples don't have form wrappers so we need to overwrite it.
+        await page.evaluate(() => {
+          const $button = document.querySelector('button')
+          const $buttonPrime = $button.cloneNode()
+          const $form = document.createElement('form')
+          $button.parentNode.appendChild($form)
+          $button.parentNode.removeChild($button)
+          $form.appendChild($button)
+          $form.appendChild($buttonPrime)
+
+          window.__SUBMIT_EVENTS = 0
+          $form.addEventListener('submit', event => {
+            window.__SUBMIT_EVENTS++
+            // Don't refresh the page, which will destroy the context to test against.
+            event.preventDefault()
+          })
+        })
+
+        await page.click('button:nth-child(1)')
+        await page.click('button:nth-child(2)')
+
+        const submitCount = await page.evaluate(() => window.__SUBMIT_EVENTS)
+
         expect(submitCount).toBe(2)
       })
     })