diff --git a/CHANGELOG.txt b/CHANGELOG.txt index 6eb465a75c..b30b4e8ebb 100644 --- a/CHANGELOG.txt +++ b/CHANGELOG.txt @@ -380,6 +380,7 @@ Changelog * Maintenance: Deprecate `wagtail.contrib.modeladmin` (Sage Abdullah) * Maintenance: Upgrade documentation theme `sphinx_wagtail_theme` to v6.1.1 which includes multiple styling fixes and always visible code copy buttons (LB (Ben) Johnston) * Maintenance: Don't update the reference index while deleting it (Andy Chosak) +* Maintenance: Allow `ActionController` to have a `noop` method to more easily leverage standalone Stimulus action options (Nandini Arora) 5.0.5 (19.10.2023) diff --git a/CONTRIBUTORS.md b/CONTRIBUTORS.md index e0e6b6766c..b6e4e71a27 100644 --- a/CONTRIBUTORS.md +++ b/CONTRIBUTORS.md @@ -775,6 +775,7 @@ * Ben Morse * Shlomo Markowitz * Felipe Lobato +* Nandini Arora ## Translators diff --git a/client/src/controllers/ActionController.test.js b/client/src/controllers/ActionController.test.js index f9a4674b9e..c47e45ecf2 100644 --- a/client/src/controllers/ActionController.test.js +++ b/client/src/controllers/ActionController.test.js @@ -276,4 +276,31 @@ describe('ActionController', () => { expect(handleChangeEvent).toHaveBeenCalled(); }); }); + + describe('noop method', () => { + beforeEach(async () => { + await setup(` + `); + }); + + it('should a noop method that does nothing, enabling use of action options', async () => { + const button = document.getElementById('button'); + + const onClick = jest.fn(); + document.addEventListener('click', onClick); + + button.dispatchEvent(new Event('click', { bubbles: true })); + + expect(onClick).not.toHaveBeenCalled(); + + // remove data-action attribute + await Promise.resolve(button.removeAttribute('data-action')); + + button.dispatchEvent(new Event('click', { bubbles: true })); + + expect(onClick).toHaveBeenCalled(); + }); + }); }); diff --git a/client/src/controllers/ActionController.ts b/client/src/controllers/ActionController.ts index f6e7c4fff4..089b79a8ed 100644 --- a/client/src/controllers/ActionController.ts +++ b/client/src/controllers/ActionController.ts @@ -41,6 +41,11 @@ import { WAGTAIL_CONFIG } from '../config/wagtailConfig'; * This text will all be selected on focus. * * + * + * @example - ensuring a button's click does not propagate + *
+ * + *
*/ export class ActionController extends Controller< HTMLButtonElement | HTMLInputElement | HTMLTextAreaElement @@ -57,6 +62,15 @@ export class ActionController extends Controller< this.element.click(); } + /** + * Intentionally does nothing. + * + * Useful for attaching data-action to leverage the built in + * Stimulus options without needing any extra functionality. + * e.g. preventDefault (`:prevent`) and stopPropagation (`:stop`). + */ + noop() {} + post(event: Event) { event.preventDefault(); event.stopPropagation(); diff --git a/docs/releases/6.0.md b/docs/releases/6.0.md index 52323d434a..4be9662bfc 100644 --- a/docs/releases/6.0.md +++ b/docs/releases/6.0.md @@ -88,6 +88,7 @@ This release adds support for Django 5.0. The support has also been backported t * Refactor snippets index view and template to make better use of generic IndexView (Sage Abdullah) * Introduce an internal `{% formattedfield %}` tag to replace direct use of `wagtailadmin/shared/field.html` (Matt Westcott) * Update Telepath dependency to 0.3.1 (Matt Westcott) + * Allow `ActionController` to have a `noop` method to more easily leverage standalone Stimulus action options (Nandini Arora) ## Upgrade considerations - removal of deprecated features from Wagtail 4.2 - 5.1