From a43ea22479334ef3ac05fb8784223d45846b71a3 Mon Sep 17 00:00:00 2001
From: HesterG <hestergong@gmail.com>
Date: Wed, 14 Jun 2023 16:01:37 +0800
Subject: Change form actions to fetch for submit review box (#25219)

Co-author: @wxiaoguang

Close #25096

The way to fix it in this PR is to change form submit to fetch using
formData, and add flags to avoid post repeatedly.
Should be able to apply to more forms that have the same issue after
this PR.

In the demo below, 'approve' is clicked several times, and then
'comment' is clicked several time after 'request changes' clicked.

After:


https://github.com/go-gitea/gitea/assets/17645053/beabeb1d-fe66-4b76-b048-4f022b4e83a0


Update: screenshots from /devtest

>
![image](https://user-images.githubusercontent.com/2114189/245680011-ee4231e0-a53d-4c2a-a9c2-71ccd98005cc.png)
>
>
![image](https://user-images.githubusercontent.com/2114189/245680057-9215d348-63d8-406d-8828-17e171163aaa.png)
>
>
![image](https://user-images.githubusercontent.com/2114189/245680148-89d7b3d1-d7b6-442f-b69e-eadaee112482.png)

---------

Co-authored-by: wxiaoguang <wxiaoguang@gmail.com>
---
 web_src/js/modules/tippy.js | 14 +++++++++++---
 1 file changed, 11 insertions(+), 3 deletions(-)

(limited to 'web_src/js/modules')

diff --git a/web_src/js/modules/tippy.js b/web_src/js/modules/tippy.js
index b424cdfd50..3409e1c714 100644
--- a/web_src/js/modules/tippy.js
+++ b/web_src/js/modules/tippy.js
@@ -3,6 +3,11 @@ import tippy from 'tippy.js';
 const visibleInstances = new Set();
 
 export function createTippy(target, opts = {}) {
+  const {role, content, onHide: optsOnHide, onDestroy: optsOnDestroy, onShow: optOnShow} = opts;
+  delete opts.onHide;
+  delete opts.onDestroy;
+  delete opts.onShow;
+
   const instance = tippy(target, {
     appendTo: document.body,
     animation: false,
@@ -13,9 +18,11 @@ export function createTippy(target, opts = {}) {
     maxWidth: 500, // increase over default 350px
     onHide: (instance) => {
       visibleInstances.delete(instance);
+      return optsOnHide?.(instance);
     },
     onDestroy: (instance) => {
       visibleInstances.delete(instance);
+      return optsOnDestroy?.(instance);
     },
     onShow: (instance) => {
       // hide other tooltip instances so only one tooltip shows at a time
@@ -25,18 +32,19 @@ export function createTippy(target, opts = {}) {
         }
       }
       visibleInstances.add(instance);
+      return optOnShow?.(instance);
     },
     arrow: `<svg width="16" height="7"><path d="m0 7 8-7 8 7Z" class="tippy-svg-arrow-outer"/><path d="m0 8 8-7 8 7Z" class="tippy-svg-arrow-inner"/></svg>`,
     role: 'menu', // HTML role attribute, only tooltips should use "tooltip"
-    theme: opts.role || 'menu', // CSS theme, we support either "tooltip" or "menu"
+    theme: role || 'menu', // CSS theme, we support either "tooltip" or "menu"
     ...opts,
   });
 
   // for popups where content refers to a DOM element, we use the 'tippy-target' class
   // to initially hide the content, now we can remove it as the content has been removed
   // from the DOM by tippy
-  if (opts.content instanceof Element) {
-    opts.content.classList.remove('tippy-target');
+  if (content instanceof Element) {
+    content.classList.remove('tippy-target');
   }
 
   return instance;
-- 
cgit v1.2.3