From 29517c54e61511aab04888f815905ce6a733269a Mon Sep 17 00:00:00 2001
From: wxiaoguang <wxiaoguang@gmail.com>
Date: Sun, 25 Feb 2024 12:17:11 +0800
Subject: [PATCH] Refactor `copy` button event handler (#29379)

Use "closest" instead of "for-loop"

(cherry picked from commit 736c98be5c2bed26cef9f7f679c49a95af8161ef)
---
 web_src/js/features/clipboard.js | 41 +++++++++++++-------------------
 1 file changed, 17 insertions(+), 24 deletions(-)

diff --git a/web_src/js/features/clipboard.js b/web_src/js/features/clipboard.js
index 224628658e..8be5505c8b 100644
--- a/web_src/js/features/clipboard.js
+++ b/web_src/js/features/clipboard.js
@@ -5,37 +5,30 @@ import {clippie} from 'clippie';
 const {copy_success, copy_error} = window.config.i18n;
 
 // Enable clipboard copy from HTML attributes. These properties are supported:
-// - data-clipboard-text: Direct text to copy, has highest precedence
+// - data-clipboard-text: Direct text to copy
 // - data-clipboard-target: Holds a selector for a <input> or <textarea> whose content is copied
 // - data-clipboard-text-type: When set to 'url' will convert relative to absolute urls
 export function initGlobalCopyToClipboardListener() {
-  document.addEventListener('click', (e) => {
-    let target = e.target;
-    // In case <button data-clipboard-text><svg></button>, so we just search
-    // up to 3 levels for performance
-    for (let i = 0; i < 3 && target; i++) {
-      let text = target.getAttribute('data-clipboard-text');
+  document.addEventListener('click', async (e) => {
+    const target = e.target.closest('[data-clipboard-text], [data-clipboard-target]');
+    if (!target) return;
 
-      if (!text && target.getAttribute('data-clipboard-target')) {
-        text = document.querySelector(target.getAttribute('data-clipboard-target'))?.value;
-      }
+    e.preventDefault();
 
-      if (text && target.getAttribute('data-clipboard-text-type') === 'url') {
-        text = toAbsoluteUrl(text);
-      }
+    let text;
+    if (target.hasAttribute('data-clipboard-text')) {
+      text = target.getAttribute('data-clipboard-text');
+    } else {
+      text = document.querySelector(target.getAttribute('data-clipboard-target'))?.value;
+    }
 
-      if (text) {
-        e.preventDefault();
+    if (text && target.getAttribute('data-clipboard-text-type') === 'url') {
+      text = toAbsoluteUrl(text);
+    }
 
-        (async() => {
-          const success = await clippie(text);
-          showTemporaryTooltip(target, success ? copy_success : copy_error);
-        })();
-
-        break;
-      }
-
-      target = target.parentElement;
+    if (text) {
+      const success = await clippie(text);
+      showTemporaryTooltip(target, success ? copy_success : copy_error);
     }
   });
 }