Merge pull request #2854 from tvdeyen/button-reenable-turbo-frame

feat(alchemy-button): Re-enable on turbo:submit-end
AlchemyCMS · May 2, 2024 · 03538cc · 03538cc
2 parents 7444bc7 + 2b38d28
commit 03538cc
Show file tree

Hide file tree

Showing 2 changed files with 29 additions and 0 deletions.
diff --git a/app/javascript/alchemy_admin/components/button.js b/app/javascript/alchemy_admin/components/button.js
@@ -8,6 +8,8 @@ class Button extends HTMLButtonElement {
       if (this.form.dataset.remote == "true") {
         this.form.addEventListener("ajax:complete", this)
       }
+
+      this.form.addEventListener("turbo:submit-end", this)
     } else {
       console.warn("No form for button found!", this)
     }
@@ -26,6 +28,7 @@ class Button extends HTMLButtonElement {
         }
         break
       case "ajax:complete":
+      case "turbo:submit-end":
         this.enable()
         break
     }

diff --git a/spec/javascript/alchemy_admin/components/button.spec.js b/spec/javascript/alchemy_admin/components/button.spec.js
@@ -61,4 +61,30 @@ describe("alchemy-button", () => {
       expect(button.innerHTML).toEqual("Save")
     })
   })
+
+  describe("on turbo forms", () => {
+    it("re-enables button on turbo:submit-end", () => {
+      const html = `
+        <turbo-frame>
+          <form>
+            <button type="submit" is="alchemy-button">Save</button>
+          </form>
+        </turbo-frame>
+      `
+      const button = renderComponent("alchemy-button", html)
+
+      const submit = new Event("submit", { bubbles: true })
+      button.form.dispatchEvent(submit)
+
+      expect(button.getAttribute("disabled")).toEqual("disabled")
+
+      const submitEnd = new CustomEvent("turbo:submit-end", { bubbles: true })
+      button.form.dispatchEvent(submitEnd)
+
+      expect(button.getAttribute("disabled")).toBeNull()
+      expect(button.getAttribute("tabindex")).toBeNull()
+      expect(button.classList.contains("disabled")).toBeFalsy()
+      expect(button.innerHTML).toEqual("Save")
+    })
+  })
 })