ActionController - Add noop method

- Useful for leveraging data-action approaches without needing a specific method functionality

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)

CONTRIBUTORS.md

@@ -775,6 +775,7 @@
 * Ben Morse
 * Shlomo Markowitz
 * Felipe Lobato
+* Nandini Arora
 
 ## Translators
 

client/src/controllers/ActionController.test.js

@@ -276,4 +276,31 @@ describe('ActionController', () => {
       expect(handleChangeEvent).toHaveBeenCalled();
     });
   });
+
+  describe('noop method', () => {
+    beforeEach(async () => {
+      await setup(`
+      <button id="button" data-controller="w-action" data-action="w-action#noop:prevent:stop">
+        Click me!
+      </button>`);
+    });
+
+    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();
+    });
+  });
 });

client/src/controllers/ActionController.ts

@@ -41,6 +41,11 @@ import { WAGTAIL_CONFIG } from '../config/wagtailConfig';
  *     This text will all be selected on focus.
  *   </textarea>
  * </form>
+ *
+ * @example - ensuring a button's click does not propagate
+ * <div>
+ *   <button type="button" data-controller="w-action" data-action="w-action#noop:stop">Go</button>
+ * </div>
  */
 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();

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