@defra/forms-engine-plugin 4.14.1 → 4.14.2-beta

package/.server/client/javascripts/debounce-click.d.ts

@@ -0,0 +1,10 @@
+/**
+ * Attaches {@link handleButtonClick} to every button that carries the
+ * `prevent-multiple-clicks` CSS class so that double-submissions are blocked
+ * across the page.
+ *
+ * Safe to call multiple times — adding the same listener twice on a given
+ * element has no effect (the browser deduplicates identical listener/options
+ * pairs).
+ */
+export function initDebounceClick(): void;

package/.server/client/javascripts/debounce-click.js

@@ -0,0 +1,58 @@
+/** How long (ms) a button stays locked after the first click. */
+const DEBOUNCE_TIMEOUT_MS = 10_000;
+
+/**
+ * Shared debounce logic used by both the click and keydown handlers.
+ * @param {Event} event
+ */
+function handleActivation(event) {
+  const button = /** @type {HTMLButtonElement} */event.currentTarget;
+  if (button.dataset.debouncing === 'true') {
+    event.preventDefault();
+    event.stopImmediatePropagation();
+    return;
+  }
+  button.dataset.debouncing = 'true';
+  setTimeout(() => {
+    delete button.dataset.debouncing;
+  }, DEBOUNCE_TIMEOUT_MS);
+}
+
+/**
+ * Click handler that prevents a button from being activated more than once
+ * within {@link DEBOUNCE_TIMEOUT_MS}.
+ * @param {MouseEvent} event
+ */
+function handleButtonClick(event) {
+  handleActivation(event);
+}
+
+/**
+ * Keydown handler that prevents a button from being activated more than once
+ * within {@link DEBOUNCE_TIMEOUT_MS} when submitted via Enter or Space.
+ * @param {KeyboardEvent} event
+ */
+function handleButtonKeydown(event) {
+  if (event.key === 'Enter' || event.key === ' ') {
+    handleActivation(event);
+  }
+}
+
+/**
+ * Attaches {@link handleButtonClick} to every button that carries the
+ * `prevent-multiple-clicks` CSS class so that double-submissions are blocked
+ * across the page.
+ *
+ * Safe to call multiple times — adding the same listener twice on a given
+ * element has no effect (the browser deduplicates identical listener/options
+ * pairs).
+ */
+export function initDebounceClick() {
+  const buttons = /** @type {NodeListOf<HTMLButtonElement>} */
+  document.querySelectorAll('.prevent-multiple-clicks');
+  for (const button of buttons) {
+    button.addEventListener('click', handleButtonClick);
+    button.addEventListener('keydown', handleButtonKeydown);
+  }
+}
+//# sourceMappingURL=debounce-click.js.map

package/.server/client/javascripts/debounce-click.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"debounce-click.js","names":["DEBOUNCE_TIMEOUT_MS","handleActivation","event","button","currentTarget","dataset","debouncing","preventDefault","stopImmediatePropagation","setTimeout","handleButtonClick","handleButtonKeydown","key","initDebounceClick","buttons","document","querySelectorAll","addEventListener"],"sources":["../../../src/client/javascripts/debounce-click.js"],"sourcesContent":["/** How long (ms) a button stays locked after the first click. */\nconst DEBOUNCE_TIMEOUT_MS = 10_000\n\n/**\n * Shared debounce logic used by both the click and keydown handlers.\n * @param {Event} event\n */\nfunction handleActivation(event) {\n  const button = /** @type {HTMLButtonElement} */ (event.currentTarget)\n\n  if (button.dataset.debouncing === 'true') {\n    event.preventDefault()\n    event.stopImmediatePropagation()\n    return\n  }\n\n  button.dataset.debouncing = 'true'\n\n  setTimeout(() => {\n    delete button.dataset.debouncing\n  }, DEBOUNCE_TIMEOUT_MS)\n}\n\n/**\n * Click handler that prevents a button from being activated more than once\n * within {@link DEBOUNCE_TIMEOUT_MS}.\n * @param {MouseEvent} event\n */\nfunction handleButtonClick(event) {\n  handleActivation(event)\n}\n\n/**\n * Keydown handler that prevents a button from being activated more than once\n * within {@link DEBOUNCE_TIMEOUT_MS} when submitted via Enter or Space.\n * @param {KeyboardEvent} event\n */\nfunction handleButtonKeydown(event) {\n  if (event.key === 'Enter' || event.key === ' ') {\n    handleActivation(event)\n  }\n}\n\n/**\n * Attaches {@link handleButtonClick} to every button that carries the\n * `prevent-multiple-clicks` CSS class so that double-submissions are blocked\n * across the page.\n *\n * Safe to call multiple times — adding the same listener twice on a given\n * element has no effect (the browser deduplicates identical listener/options\n * pairs).\n */\nexport function initDebounceClick() {\n  const buttons = /** @type {NodeListOf<HTMLButtonElement>} */ (\n    document.querySelectorAll('.prevent-multiple-clicks')\n  )\n\n  for (const button of buttons) {\n    button.addEventListener('click', handleButtonClick)\n    button.addEventListener('keydown', handleButtonKeydown)\n  }\n}\n"],"mappings":"AAAA;AACA,MAAMA,mBAAmB,GAAG,MAAM;;AAElC;AACA;AACA;AACA;AACA,SAASC,gBAAgBA,CAACC,KAAK,EAAE;EAC/B,MAAMC,MAAM,GAAG,gCAAkCD,KAAK,CAACE,aAAc;EAErE,IAAID,MAAM,CAACE,OAAO,CAACC,UAAU,KAAK,MAAM,EAAE;IACxCJ,KAAK,CAACK,cAAc,CAAC,CAAC;IACtBL,KAAK,CAACM,wBAAwB,CAAC,CAAC;IAChC;EACF;EAEAL,MAAM,CAACE,OAAO,CAACC,UAAU,GAAG,MAAM;EAElCG,UAAU,CAAC,MAAM;IACf,OAAON,MAAM,CAACE,OAAO,CAACC,UAAU;EAClC,CAAC,EAAEN,mBAAmB,CAAC;AACzB;;AAEA;AACA;AACA;AACA;AACA;AACA,SAASU,iBAAiBA,CAACR,KAAK,EAAE;EAChCD,gBAAgB,CAACC,KAAK,CAAC;AACzB;;AAEA;AACA;AACA;AACA;AACA;AACA,SAASS,mBAAmBA,CAACT,KAAK,EAAE;EAClC,IAAIA,KAAK,CAACU,GAAG,KAAK,OAAO,IAAIV,KAAK,CAACU,GAAG,KAAK,GAAG,EAAE;IAC9CX,gBAAgB,CAACC,KAAK,CAAC;EACzB;AACF;;AAEA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA,OAAO,SAASW,iBAAiBA,CAAA,EAAG;EAClC,MAAMC,OAAO,GAAG;EACdC,QAAQ,CAACC,gBAAgB,CAAC,0BAA0B,CACrD;EAED,KAAK,MAAMb,MAAM,IAAIW,OAAO,EAAE;IAC5BX,MAAM,CAACc,gBAAgB,CAAC,OAAO,EAAEP,iBAAiB,CAAC;IACnDP,MAAM,CAACc,gBAAgB,CAAC,SAAS,EAAEN,mBAAmB,CAAC;EACzD;AACF","ignoreList":[]}

package/.server/client/javascripts/debounce-click.test.js

@@ -0,0 +1,191 @@
+import { initDebounceClick } from "./debounce-click.js";
+const DEBOUNCE_TIMEOUT_MS = 10_000;
+
+/**
+ * @param {string} [extraClasses]
+ * @returns {HTMLButtonElement}
+ */
+function makeButton(extraClasses = '') {
+  const button = document.createElement('button');
+  button.className = `prevent-multiple-clicks ${extraClasses}`.trim();
+  document.body.appendChild(button);
+  return button;
+}
+
+/**
+ * @param {HTMLButtonElement} button
+ * @returns {MouseEvent}
+ */
+function click(button) {
+  const event = new MouseEvent('click', {
+    bubbles: true,
+    cancelable: true
+  });
+  button.dispatchEvent(event);
+  return event;
+}
+
+/**
+ * @param {HTMLButtonElement} button
+ * @param {string} key
+ * @returns {KeyboardEvent}
+ */
+function keydown(button, key) {
+  const event = new KeyboardEvent('keydown', {
+    key,
+    bubbles: true,
+    cancelable: true
+  });
+  button.dispatchEvent(event);
+  return event;
+}
+afterEach(() => {
+  document.body.innerHTML = '';
+});
+describe('initDebounceClick', () => {
+  it('attaches a click listener to every .prevent-multiple-clicks button', () => {
+    const b1 = makeButton();
+    const b2 = makeButton();
+    const spy1 = jest.fn();
+    const spy2 = jest.fn();
+    b1.addEventListener('click', spy1);
+    b2.addEventListener('click', spy2);
+    initDebounceClick();
+    click(b1);
+    click(b2);
+    expect(spy1).toHaveBeenCalledTimes(1);
+    expect(spy2).toHaveBeenCalledTimes(1);
+  });
+  it('does not attach to buttons that lack the class', () => {
+    const plain = document.createElement('button');
+    document.body.appendChild(plain);
+    const spy = jest.fn();
+    plain.addEventListener('click', spy);
+    initDebounceClick();
+    click(plain);
+
+    // Listener still runs — debounce was never applied
+    expect(plain.dataset.debouncing).toBeUndefined();
+  });
+});
+describe('handleButtonClick (via initDebounceClick)', () => {
+  beforeEach(() => {
+    jest.useFakeTimers();
+  });
+  afterEach(() => {
+    jest.useRealTimers();
+  });
+  it('sets data-debouncing="true" on the first click', () => {
+    const button = makeButton();
+    initDebounceClick();
+    click(button);
+    expect(button.dataset.debouncing).toBe('true');
+  });
+  it('allows a second click after the debounce timeout expires', () => {
+    const button = makeButton();
+    const spy = jest.fn();
+    button.addEventListener('click', spy);
+    initDebounceClick();
+    click(button);
+    jest.advanceTimersByTime(DEBOUNCE_TIMEOUT_MS);
+    click(button);
+    expect(button.dataset.debouncing).toBe('true');
+    expect(spy).toHaveBeenCalledTimes(2);
+  });
+  it('removes data-debouncing after the timeout', () => {
+    const button = makeButton();
+    initDebounceClick();
+    click(button);
+    expect(button.dataset.debouncing).toBe('true');
+    jest.advanceTimersByTime(DEBOUNCE_TIMEOUT_MS);
+    expect(button.dataset.debouncing).toBeUndefined();
+  });
+  it('prevents the default action on a duplicate click', () => {
+    const button = makeButton();
+    initDebounceClick();
+    click(button);
+    const duplicate = new MouseEvent('click', {
+      bubbles: true,
+      cancelable: true
+    });
+    button.dispatchEvent(duplicate);
+    expect(duplicate.defaultPrevented).toBe(true);
+  });
+  it('stops immediate propagation on a duplicate click', () => {
+    const button = makeButton();
+    initDebounceClick();
+    click(button);
+    const subsequent = jest.fn();
+    button.addEventListener('click', subsequent);
+    click(button);
+    expect(subsequent).not.toHaveBeenCalled();
+  });
+  it('does not fire listeners registered after the handler for a click within the timeout window', () => {
+    const button = makeButton();
+    initDebounceClick();
+    // Registered after initDebounceClick so the debounce handler runs first and
+    // can call stopImmediatePropagation before this listener is reached.
+    const spy = jest.fn();
+    button.addEventListener('click', spy);
+    click(button);
+    jest.advanceTimersByTime(DEBOUNCE_TIMEOUT_MS - 1);
+    click(button);
+
+    // First click let through, second is still within the window — spy blocked
+    expect(spy).toHaveBeenCalledTimes(1);
+  });
+});
+describe('handleButtonKeydown (via initDebounceClick)', () => {
+  beforeEach(() => {
+    jest.useFakeTimers();
+  });
+  afterEach(() => {
+    jest.useRealTimers();
+  });
+  it('sets data-debouncing="true" on Enter', () => {
+    const button = makeButton();
+    initDebounceClick();
+    keydown(button, 'Enter');
+    expect(button.dataset.debouncing).toBe('true');
+  });
+  it('sets data-debouncing="true" on Space', () => {
+    const button = makeButton();
+    initDebounceClick();
+    keydown(button, ' ');
+    expect(button.dataset.debouncing).toBe('true');
+  });
+  it('ignores keys other than Enter and Space', () => {
+    const button = makeButton();
+    initDebounceClick();
+    keydown(button, 'Tab');
+    expect(button.dataset.debouncing).toBeUndefined();
+  });
+  it('prevents default on a duplicate Enter keydown', () => {
+    const button = makeButton();
+    initDebounceClick();
+    keydown(button, 'Enter');
+    const duplicate = keydown(button, 'Enter');
+    expect(duplicate.defaultPrevented).toBe(true);
+  });
+  it('stops immediate propagation on a duplicate keydown within the timeout window', () => {
+    const button = makeButton();
+    initDebounceClick();
+    keydown(button, 'Enter');
+    const spy = jest.fn();
+    button.addEventListener('keydown', spy);
+    keydown(button, 'Enter');
+    expect(spy).not.toHaveBeenCalled();
+  });
+  it('allows a second keydown after the debounce timeout expires', () => {
+    const button = makeButton();
+    const spy = jest.fn();
+    button.addEventListener('keydown', spy);
+    initDebounceClick();
+    keydown(button, 'Enter');
+    jest.advanceTimersByTime(DEBOUNCE_TIMEOUT_MS);
+    keydown(button, 'Enter');
+    expect(button.dataset.debouncing).toBe('true');
+    expect(spy).toHaveBeenCalledTimes(2);
+  });
+});
+//# sourceMappingURL=debounce-click.test.js.map

package/.server/client/javascripts/debounce-click.test.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"debounce-click.test.js","names":["initDebounceClick","DEBOUNCE_TIMEOUT_MS","makeButton","extraClasses","button","document","createElement","className","trim","body","appendChild","click","event","MouseEvent","bubbles","cancelable","dispatchEvent","keydown","key","KeyboardEvent","afterEach","innerHTML","describe","it","b1","b2","spy1","jest","fn","spy2","addEventListener","expect","toHaveBeenCalledTimes","plain","spy","dataset","debouncing","toBeUndefined","beforeEach","useFakeTimers","useRealTimers","toBe","advanceTimersByTime","duplicate","defaultPrevented","subsequent","not","toHaveBeenCalled"],"sources":["../../../src/client/javascripts/debounce-click.test.js"],"sourcesContent":["import { initDebounceClick } from '~/src/client/javascripts/debounce-click.js'\n\nconst DEBOUNCE_TIMEOUT_MS = 10_000\n\n/**\n * @param {string} [extraClasses]\n * @returns {HTMLButtonElement}\n */\nfunction makeButton(extraClasses = '') {\n  const button = document.createElement('button')\n  button.className = `prevent-multiple-clicks ${extraClasses}`.trim()\n  document.body.appendChild(button)\n  return button\n}\n\n/**\n * @param {HTMLButtonElement} button\n * @returns {MouseEvent}\n */\nfunction click(button) {\n  const event = new MouseEvent('click', { bubbles: true, cancelable: true })\n  button.dispatchEvent(event)\n  return event\n}\n\n/**\n * @param {HTMLButtonElement} button\n * @param {string} key\n * @returns {KeyboardEvent}\n */\nfunction keydown(button, key) {\n  const event = new KeyboardEvent('keydown', {\n    key,\n    bubbles: true,\n    cancelable: true\n  })\n  button.dispatchEvent(event)\n  return event\n}\n\nafterEach(() => {\n  document.body.innerHTML = ''\n})\n\ndescribe('initDebounceClick', () => {\n  it('attaches a click listener to every .prevent-multiple-clicks button', () => {\n    const b1 = makeButton()\n    const b2 = makeButton()\n    const spy1 = jest.fn()\n    const spy2 = jest.fn()\n    b1.addEventListener('click', spy1)\n    b2.addEventListener('click', spy2)\n\n    initDebounceClick()\n\n    click(b1)\n    click(b2)\n\n    expect(spy1).toHaveBeenCalledTimes(1)\n    expect(spy2).toHaveBeenCalledTimes(1)\n  })\n\n  it('does not attach to buttons that lack the class', () => {\n    const plain = document.createElement('button')\n    document.body.appendChild(plain)\n    const spy = jest.fn()\n    plain.addEventListener('click', spy)\n\n    initDebounceClick()\n    click(plain)\n\n    // Listener still runs — debounce was never applied\n    expect(plain.dataset.debouncing).toBeUndefined()\n  })\n})\n\ndescribe('handleButtonClick (via initDebounceClick)', () => {\n  beforeEach(() => {\n    jest.useFakeTimers()\n  })\n\n  afterEach(() => {\n    jest.useRealTimers()\n  })\n\n  it('sets data-debouncing=\"true\" on the first click', () => {\n    const button = makeButton()\n    initDebounceClick()\n\n    click(button)\n\n    expect(button.dataset.debouncing).toBe('true')\n  })\n\n  it('allows a second click after the debounce timeout expires', () => {\n    const button = makeButton()\n    const spy = jest.fn()\n    button.addEventListener('click', spy)\n    initDebounceClick()\n\n    click(button)\n    jest.advanceTimersByTime(DEBOUNCE_TIMEOUT_MS)\n    click(button)\n\n    expect(button.dataset.debouncing).toBe('true')\n    expect(spy).toHaveBeenCalledTimes(2)\n  })\n\n  it('removes data-debouncing after the timeout', () => {\n    const button = makeButton()\n    initDebounceClick()\n\n    click(button)\n    expect(button.dataset.debouncing).toBe('true')\n\n    jest.advanceTimersByTime(DEBOUNCE_TIMEOUT_MS)\n    expect(button.dataset.debouncing).toBeUndefined()\n  })\n\n  it('prevents the default action on a duplicate click', () => {\n    const button = makeButton()\n    initDebounceClick()\n    click(button)\n\n    const duplicate = new MouseEvent('click', {\n      bubbles: true,\n      cancelable: true\n    })\n    button.dispatchEvent(duplicate)\n\n    expect(duplicate.defaultPrevented).toBe(true)\n  })\n\n  it('stops immediate propagation on a duplicate click', () => {\n    const button = makeButton()\n    initDebounceClick()\n    click(button)\n\n    const subsequent = jest.fn()\n    button.addEventListener('click', subsequent)\n\n    click(button)\n\n    expect(subsequent).not.toHaveBeenCalled()\n  })\n\n  it('does not fire listeners registered after the handler for a click within the timeout window', () => {\n    const button = makeButton()\n    initDebounceClick()\n    // Registered after initDebounceClick so the debounce handler runs first and\n    // can call stopImmediatePropagation before this listener is reached.\n    const spy = jest.fn()\n    button.addEventListener('click', spy)\n\n    click(button)\n    jest.advanceTimersByTime(DEBOUNCE_TIMEOUT_MS - 1)\n    click(button)\n\n    // First click let through, second is still within the window — spy blocked\n    expect(spy).toHaveBeenCalledTimes(1)\n  })\n})\n\ndescribe('handleButtonKeydown (via initDebounceClick)', () => {\n  beforeEach(() => {\n    jest.useFakeTimers()\n  })\n\n  afterEach(() => {\n    jest.useRealTimers()\n  })\n\n  it('sets data-debouncing=\"true\" on Enter', () => {\n    const button = makeButton()\n    initDebounceClick()\n\n    keydown(button, 'Enter')\n\n    expect(button.dataset.debouncing).toBe('true')\n  })\n\n  it('sets data-debouncing=\"true\" on Space', () => {\n    const button = makeButton()\n    initDebounceClick()\n\n    keydown(button, ' ')\n\n    expect(button.dataset.debouncing).toBe('true')\n  })\n\n  it('ignores keys other than Enter and Space', () => {\n    const button = makeButton()\n    initDebounceClick()\n\n    keydown(button, 'Tab')\n\n    expect(button.dataset.debouncing).toBeUndefined()\n  })\n\n  it('prevents default on a duplicate Enter keydown', () => {\n    const button = makeButton()\n    initDebounceClick()\n    keydown(button, 'Enter')\n\n    const duplicate = keydown(button, 'Enter')\n\n    expect(duplicate.defaultPrevented).toBe(true)\n  })\n\n  it('stops immediate propagation on a duplicate keydown within the timeout window', () => {\n    const button = makeButton()\n    initDebounceClick()\n    keydown(button, 'Enter')\n\n    const spy = jest.fn()\n    button.addEventListener('keydown', spy)\n    keydown(button, 'Enter')\n\n    expect(spy).not.toHaveBeenCalled()\n  })\n\n  it('allows a second keydown after the debounce timeout expires', () => {\n    const button = makeButton()\n    const spy = jest.fn()\n    button.addEventListener('keydown', spy)\n    initDebounceClick()\n\n    keydown(button, 'Enter')\n    jest.advanceTimersByTime(DEBOUNCE_TIMEOUT_MS)\n    keydown(button, 'Enter')\n\n    expect(button.dataset.debouncing).toBe('true')\n    expect(spy).toHaveBeenCalledTimes(2)\n  })\n})\n"],"mappings":"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","ignoreList":[]}

package/.server/client/javascripts/shared.d.ts

@@ -7,9 +7,11 @@ export * as map from "../../client/javascripts/map.js";
 export * as geospatialMap from "../../client/javascripts/geospatial-map.js";
 export const initAllGovuk: typeof initAllGovukImp;
 export const initAllAutocomplete: typeof initAllAutocompleteImp;
+export const initDebounceClick: typeof initDebounceClickImp;
 export const initFileUpload: typeof initFileUploadImp;
 export const initPreviewCloseLink: typeof initPreviewCloseLinkImp;
 import { initAllGovuk as initAllGovukImp } from '../../client/javascripts/govuk.js';
 import { initAllAutocomplete as initAllAutocompleteImp } from '../../client/javascripts/autocomplete.js';
+import { initDebounceClick as initDebounceClickImp } from '../../client/javascripts/debounce-click.js';
 import { initFileUpload as initFileUploadImp } from '../../client/javascripts/file-upload.js';
 import { initPreviewCloseLink as initPreviewCloseLinkImp } from '../../client/javascripts/preview-close-link.js';

package/.server/client/javascripts/shared.js

@@ -1,4 +1,5 @@
 import { initAllAutocomplete as initAllAutocompleteImp } from "./autocomplete.js";
+import { initDebounceClick as initDebounceClickImp } from "./debounce-click.js";
 import { initFileUpload as initFileUploadImp } from "./file-upload.js";
 import { initAllGovuk as initAllGovukImp } from "./govuk.js";
 import { initPreviewCloseLink as initPreviewCloseLinkImp } from "./preview-close-link.js";
@@ -7,6 +8,7 @@ export * as map from "./map.js";
 export * as geospatialMap from "./geospatial-map.js";
 export const initAllGovuk = initAllGovukImp;
 export const initAllAutocomplete = initAllAutocompleteImp;
+export const initDebounceClick = initDebounceClickImp;
 export const initFileUpload = initFileUploadImp;
 export const initPreviewCloseLink = initPreviewCloseLinkImp;
 
@@ -16,6 +18,7 @@ export const initPreviewCloseLink = initPreviewCloseLinkImp;
 export function initAll() {
   initAllGovuk();
   initAllAutocomplete();
+  initDebounceClick();
   initFileUpload();
   initPreviewCloseLink();
 }

package/.server/client/javascripts/shared.js.map

@@ -1 +1 @@
-{"version":3,"file":"shared.js","names":["initAllAutocomplete","initAllAutocompleteImp","initFileUpload","initFileUploadImp","initAllGovuk","initAllGovukImp","initPreviewCloseLink","initPreviewCloseLinkImp","initMaps","map","geospatialMap","initAll"],"sources":["../../../src/client/javascripts/shared.js"],"sourcesContent":["import { initAllAutocomplete as initAllAutocompleteImp } from '~/src/client/javascripts/autocomplete.js'\nimport { initFileUpload as initFileUploadImp } from '~/src/client/javascripts/file-upload.js'\nimport { initAllGovuk as initAllGovukImp } from '~/src/client/javascripts/govuk.js'\nimport { initPreviewCloseLink as initPreviewCloseLinkImp } from '~/src/client/javascripts/preview-close-link.js'\nexport { initMaps } from '~/src/client/javascripts/map.js'\nexport * as map from '~/src/client/javascripts/map.js'\nexport * as geospatialMap from '~/src/client/javascripts/geospatial-map.js'\n\nexport const initAllGovuk = initAllGovukImp\nexport const initAllAutocomplete = initAllAutocompleteImp\nexport const initFileUpload = initFileUploadImp\nexport const initPreviewCloseLink = initPreviewCloseLinkImp\n\n/**\n * Initialise all clientside components (but not maps as this will be an opt-in for now given the additional UMD assets that are required)\n */\nexport function initAll() {\n  initAllGovuk()\n  initAllAutocomplete()\n  initFileUpload()\n  initPreviewCloseLink()\n}\n"],"mappings":"AAAA,SAASA,mBAAmB,IAAIC,sBAAsB;AACtD,SAASC,cAAc,IAAIC,iBAAiB;AAC5C,SAASC,YAAY,IAAIC,eAAe;AACxC,SAASC,oBAAoB,IAAIC,uBAAuB;AACxD,SAASC,QAAQ;AACjB,OAAO,KAAKC,GAAG;AACf,OAAO,KAAKC,aAAa;AAEzB,OAAO,MAAMN,YAAY,GAAGC,eAAe;AAC3C,OAAO,MAAML,mBAAmB,GAAGC,sBAAsB;AACzD,OAAO,MAAMC,cAAc,GAAGC,iBAAiB;AAC/C,OAAO,MAAMG,oBAAoB,GAAGC,uBAAuB;;AAE3D;AACA;AACA;AACA,OAAO,SAASI,OAAOA,CAAA,EAAG;EACxBP,YAAY,CAAC,CAAC;EACdJ,mBAAmB,CAAC,CAAC;EACrBE,cAAc,CAAC,CAAC;EAChBI,oBAAoB,CAAC,CAAC;AACxB","ignoreList":[]}
+{"version":3,"file":"shared.js","names":["initAllAutocomplete","initAllAutocompleteImp","initDebounceClick","initDebounceClickImp","initFileUpload","initFileUploadImp","initAllGovuk","initAllGovukImp","initPreviewCloseLink","initPreviewCloseLinkImp","initMaps","map","geospatialMap","initAll"],"sources":["../../../src/client/javascripts/shared.js"],"sourcesContent":["import { initAllAutocomplete as initAllAutocompleteImp } from '~/src/client/javascripts/autocomplete.js'\nimport { initDebounceClick as initDebounceClickImp } from '~/src/client/javascripts/debounce-click.js'\nimport { initFileUpload as initFileUploadImp } from '~/src/client/javascripts/file-upload.js'\nimport { initAllGovuk as initAllGovukImp } from '~/src/client/javascripts/govuk.js'\nimport { initPreviewCloseLink as initPreviewCloseLinkImp } from '~/src/client/javascripts/preview-close-link.js'\nexport { initMaps } from '~/src/client/javascripts/map.js'\nexport * as map from '~/src/client/javascripts/map.js'\nexport * as geospatialMap from '~/src/client/javascripts/geospatial-map.js'\n\nexport const initAllGovuk = initAllGovukImp\nexport const initAllAutocomplete = initAllAutocompleteImp\nexport const initDebounceClick = initDebounceClickImp\nexport const initFileUpload = initFileUploadImp\nexport const initPreviewCloseLink = initPreviewCloseLinkImp\n\n/**\n * Initialise all clientside components (but not maps as this will be an opt-in for now given the additional UMD assets that are required)\n */\nexport function initAll() {\n  initAllGovuk()\n  initAllAutocomplete()\n  initDebounceClick()\n  initFileUpload()\n  initPreviewCloseLink()\n}\n"],"mappings":"AAAA,SAASA,mBAAmB,IAAIC,sBAAsB;AACtD,SAASC,iBAAiB,IAAIC,oBAAoB;AAClD,SAASC,cAAc,IAAIC,iBAAiB;AAC5C,SAASC,YAAY,IAAIC,eAAe;AACxC,SAASC,oBAAoB,IAAIC,uBAAuB;AACxD,SAASC,QAAQ;AACjB,OAAO,KAAKC,GAAG;AACf,OAAO,KAAKC,aAAa;AAEzB,OAAO,MAAMN,YAAY,GAAGC,eAAe;AAC3C,OAAO,MAAMP,mBAAmB,GAAGC,sBAAsB;AACzD,OAAO,MAAMC,iBAAiB,GAAGC,oBAAoB;AACrD,OAAO,MAAMC,cAAc,GAAGC,iBAAiB;AAC/C,OAAO,MAAMG,oBAAoB,GAAGC,uBAAuB;;AAE3D;AACA;AACA;AACA,OAAO,SAASI,OAAOA,CAAA,EAAG;EACxBP,YAAY,CAAC,CAAC;EACdN,mBAAmB,CAAC,CAAC;EACrBE,iBAAiB,CAAC,CAAC;EACnBE,cAAc,CAAC,CAAC;EAChBI,oBAAoB,CAAC,CAAC;AACxB","ignoreList":[]}

package/.server/server/plugins/engine/views/summary.html

@@ -75,11 +75,15 @@
           {% set isDeclaration = declaration or components | length %}
           {% set paymentPending = paymentRequired and not paymentState %}
 
+          {# The prevent-multiple-clicks CSS class wires up to debounce-click.js to disable the button for 10s.
+              For those with JS enabled, it will help prevent multiple submissions when a large form is taking a while to submit.
+              When a better fix is implemented, this class can be removed and preventDoubleClick should be set back to true. #}
           {{ govukButton({
             text: "Pay and submit" if paymentPending else ("Accept and submit" if isDeclaration else "Submit"),
+            classes: "prevent-multiple-clicks",
             name: "action",
             value: "send",
-            preventDoubleClick: true
+            preventDoubleClick: false
           }) }}
 
           {% if allowSaveAndExit %}

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@defra/forms-engine-plugin",
-  "version": "4.14.1",
+  "version": "4.14.2-beta",
   "description": "Defra forms engine",
   "type": "module",
   "files": [

package/src/client/javascripts/debounce-click.js

@@ -0,0 +1,62 @@
+/** How long (ms) a button stays locked after the first click. */
+const DEBOUNCE_TIMEOUT_MS = 10_000
+
+/**
+ * Shared debounce logic used by both the click and keydown handlers.
+ * @param {Event} event
+ */
+function handleActivation(event) {
+  const button = /** @type {HTMLButtonElement} */ (event.currentTarget)
+
+  if (button.dataset.debouncing === 'true') {
+    event.preventDefault()
+    event.stopImmediatePropagation()
+    return
+  }
+
+  button.dataset.debouncing = 'true'
+
+  setTimeout(() => {
+    delete button.dataset.debouncing
+  }, DEBOUNCE_TIMEOUT_MS)
+}
+
+/**
+ * Click handler that prevents a button from being activated more than once
+ * within {@link DEBOUNCE_TIMEOUT_MS}.
+ * @param {MouseEvent} event
+ */
+function handleButtonClick(event) {
+  handleActivation(event)
+}
+
+/**
+ * Keydown handler that prevents a button from being activated more than once
+ * within {@link DEBOUNCE_TIMEOUT_MS} when submitted via Enter or Space.
+ * @param {KeyboardEvent} event
+ */
+function handleButtonKeydown(event) {
+  if (event.key === 'Enter' || event.key === ' ') {
+    handleActivation(event)
+  }
+}
+
+/**
+ * Attaches {@link handleButtonClick} to every button that carries the
+ * `prevent-multiple-clicks` CSS class so that double-submissions are blocked
+ * across the page.
+ *
+ * Safe to call multiple times — adding the same listener twice on a given
+ * element has no effect (the browser deduplicates identical listener/options
+ * pairs).
+ */
+export function initDebounceClick() {
+  const buttons = /** @type {NodeListOf<HTMLButtonElement>} */ (
+    document.querySelectorAll('.prevent-multiple-clicks')
+  )
+
+  for (const button of buttons) {
+    button.addEventListener('click', handleButtonClick)
+    button.addEventListener('keydown', handleButtonKeydown)
+  }
+}

package/src/client/javascripts/shared.js

@@ -1,4 +1,5 @@
 import { initAllAutocomplete as initAllAutocompleteImp } from './autocomplete.js'
+import { initDebounceClick as initDebounceClickImp } from './debounce-click.js'
 import { initFileUpload as initFileUploadImp } from './file-upload.js'
 import { initAllGovuk as initAllGovukImp } from './govuk.js'
 import { initPreviewCloseLink as initPreviewCloseLinkImp } from './preview-close-link.js'
@@ -8,6 +9,7 @@ export * as geospatialMap from './geospatial-map.js'
 
 export const initAllGovuk = initAllGovukImp
 export const initAllAutocomplete = initAllAutocompleteImp
+export const initDebounceClick = initDebounceClickImp
 export const initFileUpload = initFileUploadImp
 export const initPreviewCloseLink = initPreviewCloseLinkImp
 
@@ -17,6 +19,7 @@ export const initPreviewCloseLink = initPreviewCloseLinkImp
 export function initAll() {
   initAllGovuk()
   initAllAutocomplete()
+  initDebounceClick()
   initFileUpload()
   initPreviewCloseLink()
 }

package/src/server/plugins/engine/views/summary.html

@@ -75,11 +75,15 @@
           {% set isDeclaration = declaration or components | length %}
           {% set paymentPending = paymentRequired and not paymentState %}
 
+          {# The prevent-multiple-clicks CSS class wires up to debounce-click.js to disable the button for 10s.
+              For those with JS enabled, it will help prevent multiple submissions when a large form is taking a while to submit.
+              When a better fix is implemented, this class can be removed and preventDoubleClick should be set back to true. #}
           {{ govukButton({
             text: "Pay and submit" if paymentPending else ("Accept and submit" if isDeclaration else "Submit"),
+            classes: "prevent-multiple-clicks",
             name: "action",
             value: "send",
-            preventDoubleClick: true
+            preventDoubleClick: false
           }) }}
 
           {% if allowSaveAndExit %}