From 2d20c8669097b0e42b1751ec18059b242a939641 Mon Sep 17 00:00:00 2001
From: Alexander Ebert <ebert@woltlab.com>
Date: Wed, 9 Mar 2022 16:14:14 +0100
Subject: [PATCH] Improved the UX for page object id suggestions

See https://www.woltlab.com/community/thread/294550-men%C3%BCpunkt-mit-artikelbezug-artikel-id-heraussuchen-klick-%C3%B6ffnet-artikel/
---
 .../Core/Ui/Page/Search/Handler.ts            | 27 +++++++++----------
 .../Core/Ui/Page/Search/Handler.js            | 24 ++++++++---------
 2 files changed, 25 insertions(+), 26 deletions(-)

diff --git a/ts/WoltLabSuite/Core/Ui/Page/Search/Handler.ts b/ts/WoltLabSuite/Core/Ui/Page/Search/Handler.ts
index 03d2d33f13..3e7a7ddd76 100644
--- a/ts/WoltLabSuite/Core/Ui/Page/Search/Handler.ts
+++ b/ts/WoltLabSuite/Core/Ui/Page/Search/Handler.ts
@@ -81,14 +81,21 @@ class UiPageSearchHandler implements DialogCallbackObject {
         <div>
           <div class="containerHeadline">
             <h3>
-                <a href="${StringUtil.escapeHTML(item.link)}">${StringUtil.escapeHTML(item.title)}</a>
+                <a href="#">${StringUtil.escapeHTML(item.title)}</a>
             </h3>
-          ${description}
+            ${description}
           </div>
         </div>
       </div>`;
 
-      listItem.addEventListener("click", this.click.bind(this));
+      const link = listItem.querySelector("a")!;
+      link.addEventListener("click", (event) => {
+        event.preventDefault();
+      });
+
+      listItem.addEventListener("click", () => {
+        this.click(item.objectID);
+      });
 
       this.resultList!.appendChild(listItem);
     });
@@ -122,18 +129,10 @@ class UiPageSearchHandler implements DialogCallbackObject {
   }
 
   /**
-   * Handles clicks on the item unless the click occurred directly on a link.
+   * Selects an item from the results.
    */
-  private click(event: MouseEvent): void {
-    const clickTarget = event.target as HTMLElement;
-    if (clickTarget.nodeName === "A") {
-      return;
-    }
-
-    event.stopPropagation();
-
-    const eventTarget = event.currentTarget as HTMLElement;
-    this.callbackSuccess!(+eventTarget.dataset.objectId!);
+  private click(objectId: number): void {
+    this.callbackSuccess!(objectId);
 
     UiDialog.close(this);
   }
diff --git a/wcfsetup/install/files/js/WoltLabSuite/Core/Ui/Page/Search/Handler.js b/wcfsetup/install/files/js/WoltLabSuite/Core/Ui/Page/Search/Handler.js
index 5d8fed5792..e783b7be73 100644
--- a/wcfsetup/install/files/js/WoltLabSuite/Core/Ui/Page/Search/Handler.js
+++ b/wcfsetup/install/files/js/WoltLabSuite/Core/Ui/Page/Search/Handler.js
@@ -58,13 +58,19 @@ define(["require", "exports", "tslib", "../../../Language", "../../../StringUtil
         <div>
           <div class="containerHeadline">
             <h3>
-                <a href="${StringUtil.escapeHTML(item.link)}">${StringUtil.escapeHTML(item.title)}</a>
+                <a href="#">${StringUtil.escapeHTML(item.title)}</a>
             </h3>
-          ${description}
+            ${description}
           </div>
         </div>
       </div>`;
-                listItem.addEventListener("click", this.click.bind(this));
+                const link = listItem.querySelector("a");
+                link.addEventListener("click", (event) => {
+                    event.preventDefault();
+                });
+                listItem.addEventListener("click", () => {
+                    this.click(item.objectID);
+                });
                 this.resultList.appendChild(listItem);
             });
             Util_1.default.show(this.resultListContainer);
@@ -90,16 +96,10 @@ define(["require", "exports", "tslib", "../../../Language", "../../../StringUtil
             return this.searchInputHandler;
         }
         /**
-         * Handles clicks on the item unless the click occurred directly on a link.
+         * Selects an item from the results.
          */
-        click(event) {
-            const clickTarget = event.target;
-            if (clickTarget.nodeName === "A") {
-                return;
-            }
-            event.stopPropagation();
-            const eventTarget = event.currentTarget;
-            this.callbackSuccess(+eventTarget.dataset.objectId);
+        click(objectId) {
+            this.callbackSuccess(objectId);
             Dialog_1.default.close(this);
         }
         _dialogSetup() {
-- 
2.20.1