Action modifier to disable element while in-flight

Author: JohananOppongAmoateng

src/django_unicorn/static/unicorn/js/component.js

@@ -45,6 +45,7 @@ export class Component {
     this.poll = {};
 
     this.actionQueue = [];
+    this.actionCleanups = [];
     this.currentActionQueue = null;
     this.lastTriggeringElements = [];
 

src/django_unicorn/static/unicorn/js/element.js

@@ -118,6 +118,7 @@ export class Element {
         action.isPrevent = false;
         action.isStop = false;
         action.isDiscard = false;
+        action.isDisable = false;
         action.debounceTime = 0;
 
         if (attribute.modifiers) {
@@ -128,6 +129,8 @@ export class Element {
               action.isStop = true;
             } else if (modifier === "discard") {
               action.isDiscard = true;
+            } else if (modifier === "disable") {
+              action.isDisable = true;
             } else if (modifier === "debounce") {
               action.debounceTime = attribute.modifiers.debounce
                 ? parseInt(attribute.modifiers.debounce, 10) || 0

src/django_unicorn/static/unicorn/js/eventListeners.js

@@ -212,6 +212,13 @@ export function addActionEventListener(component, eventType) {
           });
 
           if (!action.key || action.key === toKebabCase(event.key)) {
+            if (action.isDisable) {
+              element.el.disabled = true;
+              component.actionCleanups.push(() => {
+                element.el.disabled = false;
+              });
+            }
+
             handleLoading(component, targetElement);
             component.callMethod(
               actionName,

src/django_unicorn/static/unicorn/js/messageSender.js

@@ -62,6 +62,9 @@ export function send(component, callback) {
         loadingElement.handleDirty(true);
       });
 
+      component.actionCleanups.forEach((cleanup) => cleanup());
+      component.actionCleanups = [];
+
       // HTTP status code of 304 is `Not Modified`. This null gets caught in the next promise
       // and stops any more processing.
       if (response.status === 304) {
@@ -73,6 +76,9 @@ export function send(component, callback) {
       );
     })
     .then((responseJson) => {
+      component.actionCleanups.forEach((cleanup) => cleanup());
+      component.actionCleanups = [];
+
       if (!responseJson) {
         return;
       }
@@ -296,6 +302,9 @@ export function send(component, callback) {
       component.currentActionQueue = null;
       component.lastTriggeringElements = [];
 
+      component.actionCleanups.forEach((cleanup) => cleanup());
+      component.actionCleanups = [];
+
       if (isFunction(callback)) {
         callback(null, null, err);
       }

tests/js/element/action_disable.test.js

@@ -0,0 +1,58 @@
+import test from "ava";
+import { getComponent } from "../utils.js";
+
+test("action disable modifier", async (t) => {
+  const html = `
+    <div unicorn:id="5jypjiyb" unicorn:name="text-inputs" unicorn:checksum="GXzew3Km">
+      <button unicorn:click.disable="test()"></button>
+    </div>
+  `;
+  const component = getComponent(html);
+  const button = component.root.querySelector("button");
+
+  // 1. Initial state: Enabled
+  t.false(button.hasAttribute("disabled"));
+
+  const MouseEvent = component.document.defaultView.MouseEvent;
+  const event = new MouseEvent("click", {
+    bubbles: true,
+    cancelable: true,
+    view: component.document.defaultView,
+  });
+
+  // 2. Click: Should become disabled immediately
+  button.dispatchEvent(event);
+  t.true(button.disabled);
+
+  // 3. Wait for debounce (0ms) + fetch (async) to complete
+  // We can use a short timeout to let the event loop process the fetch
+  await new Promise(resolve => setTimeout(resolve, 10));
+
+  // 4. Final state: Should be enabled again
+  t.false(button.disabled);
+});
+
+test("action disable modifier with error", async (t) => {
+  const html = `
+      <div unicorn:id="error-test" unicorn:name="text-inputs" unicorn:checksum="GXzew3Km">
+        <button unicorn:click.disable="test()"></button>
+      </div>
+    `;
+  const component = getComponent(html, "error-test");
+  const button = component.root.querySelector("button");
+
+  global.fetch.post("/test/error-input", 500);
+  component.syncUrl = "/test/error-input";
+
+  const MouseEvent = component.document.defaultView.MouseEvent;
+  button.dispatchEvent(new MouseEvent("click", {
+    bubbles: true,
+    view: component.document.defaultView
+  }));
+
+  t.true(button.disabled);
+
+  await new Promise(resolve => setTimeout(resolve, 20));
+
+  t.false(button.disabled);
+});