fix(js): handle multiple buttons in a single form when showing loading state

Author: fguillot

internal/ui/static/js/app.js

@@ -140,15 +140,21 @@ function onClickMainMenuListItem(event) {
     }
 }
 
-// Change the button label when the page is loading.
-function handleSubmitButtons() {
+/**
+ * This function changes the button label to the loading state and disables the button.
+ *
+ * @returns {void}
+ */
+function disableSubmitButtonsOnFormSubmit() {
     document.querySelectorAll("form").forEach((element) => {
         element.onsubmit = () => {
-            const button = element.querySelector("button");
-            if (button) {
-                button.textContent = button.dataset.labelLoading;
+            const buttons = element.querySelectorAll("button[type=submit]");
+            buttons.forEach((button) => {
+                if (button.dataset.labelLoading) {
+                    button.textContent = button.dataset.labelLoading;
+                }
                 button.disabled = true;
-            }
+            });
         };
     });
 }

internal/ui/static/js/bootstrap.js

@@ -1,5 +1,5 @@
 document.addEventListener("DOMContentLoaded", () => {
-    handleSubmitButtons();
+    disableSubmitButtonsOnFormSubmit();
 
     if (!document.querySelector("body[data-disable-keyboard-shortcuts=true]")) {
         const keyboardHandler = new KeyboardHandler();