4 files changed, 50 insertions, 29 deletions
diff --git a/web_src/js/features/common-button.ts b/web_src/js/features/common-button.ts
index ae399e48b3..22a7890857 100644
--- a/web_src/js/features/common-button.ts
+++ b/web_src/js/features/common-button.ts
@@ -43,13 +43,16 @@ export function initGlobalDeleteButton(): void {
 
       fomanticQuery(modal).modal({
         closable: false,
-        onApprove: async () => {
+        onApprove: () => {
           // if `data-type="form"` exists, then submit the form by the selector provided by `data-form="..."`
           if (btn.getAttribute('data-type') === 'form') {
             const formSelector = btn.getAttribute('data-form');
             const form = document.querySelector<HTMLFormElement>(formSelector);
             if (!form) throw new Error(`no form named ${formSelector} found`);
+            modal.classList.add('is-loading'); // the form is not in the modal, so also add loading indicator to the modal
+            form.classList.add('is-loading');
             form.submit();
+            return false; // prevent modal from closing automatically
           }
 
           // prepare an AJAX form by data attributes
@@ -62,12 +65,15 @@ export function initGlobalDeleteButton(): void {
               postData.append('id', value);
             }
           }
-
-          const response = await POST(btn.getAttribute('data-url'), {data: postData});
-          if (response.ok) {
-            const data = await response.json();
-            window.location.href = data.redirect;
-          }
+          (async () => {
+            const response = await POST(btn.getAttribute('data-url'), {data: postData});
+            if (response.ok) {
+              const data = await response.json();
+              window.location.href = data.redirect;
+            }
+          })();
+          modal.classList.add('is-loading'); // the request is in progress, so also add loading indicator to the modal
+          return false; // prevent modal from closing automatically
         },
       }).modal('show');
     });
@@ -158,13 +164,7 @@ function onShowModalClick(el: HTMLElement, e: MouseEvent) {
     }
   }
 
-  fomanticQuery(elModal).modal('setting', {
-    onApprove: () => {
-      // "form-fetch-action" can handle network errors gracefully,
-      // so keep the modal dialog to make users can re-submit the form if anything wrong happens.
-      if (elModal.querySelector('.form-fetch-action')) return false;
-    },
-  }).modal('show');
+  fomanticQuery(elModal).modal('show');
 }
 
 export function initGlobalButtons(): void {
diff --git a/web_src/js/features/comp/LabelEdit.ts b/web_src/js/features/comp/LabelEdit.ts
index 141c5eecfe..423440129c 100644
--- a/web_src/js/features/comp/LabelEdit.ts
+++ b/web_src/js/features/comp/LabelEdit.ts
@@ -72,6 +72,7 @@ export function initCompLabelEdit(pageSelector: string) {
           return false;
         }
         submitFormFetchAction(form);
+        return false;
       },
     }).modal('show');
   };
diff --git a/web_src/js/features/repo-issue.ts b/web_src/js/features/repo-issue.ts
index bc7d4dee19..c7799ec415 100644
--- a/web_src/js/features/repo-issue.ts
+++ b/web_src/js/features/repo-issue.ts
@@ -17,6 +17,7 @@ import {showErrorToast} from '../modules/toast.ts';
 import {initRepoIssueSidebar} from './repo-issue-sidebar.ts';
 import {fomanticQuery} from '../modules/fomantic/base.ts';
 import {ignoreAreYouSure} from '../vendor/jquery.are-you-sure.ts';
+import {registerGlobalInitFunc} from '../modules/observer.ts';
 
 const {appSubUrl} = window.config;
 
@@ -416,25 +417,20 @@ export function initRepoIssueWipNewTitle() {
 
 export function initRepoIssueWipToggle() {
   // Toggle WIP for existing PR
-  queryElems(document, '.toggle-wip', (el) => el.addEventListener('click', async (e) => {
+  registerGlobalInitFunc('initPullRequestWipToggle', (toggleWip) => toggleWip.addEventListener('click', async (e) => {
     e.preventDefault();
-    const toggleWip = el;
     const title = toggleWip.getAttribute('data-title');
     const wipPrefix = toggleWip.getAttribute('data-wip-prefix');
     const updateUrl = toggleWip.getAttribute('data-update-url');
 
-    try {
-      const params = new URLSearchParams();
-      params.append('title', title?.startsWith(wipPrefix) ? title.slice(wipPrefix.length).trim() : `${wipPrefix.trim()} ${title}`);
-
-      const response = await POST(updateUrl, {data: params});
-      if (!response.ok) {
-        throw new Error('Failed to toggle WIP status');
-      }
-      window.location.reload();
-    } catch (error) {
-      console.error(error);
+    const params = new URLSearchParams();
+    params.append('title', title?.startsWith(wipPrefix) ? title.slice(wipPrefix.length).trim() : `${wipPrefix.trim()} ${title}`);
+    const response = await POST(updateUrl, {data: params});
+    if (!response.ok) {
+      showErrorToast(`Failed to toggle 'work in progress' status`);
+      return;
     }
+    window.location.reload();
   }));
 }
 
diff --git a/web_src/js/modules/fomantic/modal.ts b/web_src/js/modules/fomantic/modal.ts
index b07b941590..a96c7785e1 100644
--- a/web_src/js/modules/fomantic/modal.ts
+++ b/web_src/js/modules/fomantic/modal.ts
@@ -9,8 +9,9 @@ const fomanticModalFn = $.fn.modal;
 export function initAriaModalPatch() {
   if ($.fn.modal === ariaModalFn) throw new Error('initAriaModalPatch could only be called once');
   $.fn.modal = ariaModalFn;
-  $.fn.fomanticExt.onModalBeforeHidden = onModalBeforeHidden;
   (ariaModalFn as FomanticInitFunction).settings = fomanticModalFn.settings;
+  $.fn.fomanticExt.onModalBeforeHidden = onModalBeforeHidden;
+  $.fn.modal.settings.onApprove = onModalApproveDefault;
 }
 
 // the patched `$.fn.modal` modal function
@@ -34,6 +35,29 @@ function ariaModalFn(this: any, ...args: Parameters<FomanticInitFunction>) {
 function onModalBeforeHidden(this: any) {
   const $modal = $(this);
   const elModal = $modal[0];
-  queryElems(elModal, 'form', (form: HTMLFormElement) => form.reset());
   hideToastsFrom(elModal.closest('.ui.dimmer') ?? document.body);
+
+  // reset the form after the modal is hidden, after other modal events and handlers (e.g. "onApprove", form submit)
+  setTimeout(() => {
+    queryElems(elModal, 'form', (form: HTMLFormElement) => form.reset());
+  }, 0);
+}
+
+function onModalApproveDefault(this: any) {
+  const $modal = $(this);
+  const selectors = $modal.modal('setting', 'selector');
+  const elModal = $modal[0];
+  const elApprove = elModal.querySelector(selectors.approve);
+  const elForm = elApprove?.closest('form');
+  if (!elForm) return true; // no form, just allow closing the modal
+
+  // "form-fetch-action" can handle network errors gracefully,
+  // so keep the modal dialog to make users can re-submit the form if anything wrong happens.
+  if (elForm.matches('.form-fetch-action')) return false;
+
+  // There is an abuse for the "modal" + "form" combination, the "Approve" button is a traditional form submit button in the form.
+  // Then "approve" and "submit" occur at the same time, the modal will be closed immediately before the form is submitted.
+  // So here we prevent the modal from closing automatically by returning false, add the "is-loading" class to the form element.
+  elForm.classList.add('is-loading');
+  return false;
 }