From f1fb6f155759a8d8fb6331c936354c7d7493ba66 Mon Sep 17 00:00:00 2001
From: Marcel Werk <burntime@woltlab.com>
Date: Sat, 7 May 2022 18:51:22 +0200
Subject: [PATCH] Proper history navigation for searches

---
 ts/WoltLabSuite/Core/Ui/Search/Extended.ts    | 25 ++++++++++++++-----
 .../WoltLabSuite/Core/Ui/Search/Extended.js   | 20 ++++++++++-----
 2 files changed, 33 insertions(+), 12 deletions(-)

diff --git a/ts/WoltLabSuite/Core/Ui/Search/Extended.ts b/ts/WoltLabSuite/Core/Ui/Search/Extended.ts
index c342995f3a..655d787486 100644
--- a/ts/WoltLabSuite/Core/Ui/Search/Extended.ts
+++ b/ts/WoltLabSuite/Core/Ui/Search/Extended.ts
@@ -29,6 +29,11 @@ type ResponseSearchResults = {
   template: string;
 };
 
+const enum SearchAction {
+  Modify,
+  Init,
+}
+
 export class UiSearchExtended {
   private readonly form: HTMLFormElement;
   private readonly queryInput: HTMLInputElement;
@@ -62,9 +67,13 @@ export class UiSearchExtended {
     this.form.addEventListener("submit", (event) => {
       event.preventDefault();
       this.activePage = 1;
-      void this.search();
+      void this.search(SearchAction.Modify);
     });
     this.typeInput.addEventListener("change", () => this.changeType());
+
+    window.addEventListener("popstate", () => {
+      this.initQueryString();
+    });
   }
 
   private initKeywordSuggestions(): void {
@@ -82,12 +91,12 @@ export class UiSearchExtended {
     });
   }
 
-  private async search(): Promise<void> {
+  private async search(searchAction: SearchAction): Promise<void> {
     if (!this.queryInput.value.trim() && !this.usernameInput.value.trim()) {
       return;
     }
 
-    this.updateQueryString();
+    this.updateQueryString(searchAction);
 
     this.lastSearchRequest?.abort();
 
@@ -107,7 +116,7 @@ export class UiSearchExtended {
     }
   }
 
-  private updateQueryString(): void {
+  private updateQueryString(searchAction: SearchAction): void {
     const url = new URL(this.form.action);
     url.search += url.search !== "" ? "&" : "?";
 
@@ -122,7 +131,11 @@ export class UiSearchExtended {
     }
     url.search += new URLSearchParams(parameters);
 
-    window.history.replaceState({}, document.title, url.toString());
+    if (searchAction === SearchAction.Init) {
+      window.history.replaceState({}, document.title, url.toString());
+    } else {
+      window.history.pushState({}, document.title, url.toString());
+    }
   }
 
   private getFormData(): Record<string, unknown> {
@@ -173,7 +186,7 @@ export class UiSearchExtended {
     });
 
     this.typeInput.dispatchEvent(new Event("change"));
-    void this.search();
+    void this.search(SearchAction.Init);
   }
 
   private initPagination(position: "top" | "bottom"): void {
diff --git a/wcfsetup/install/files/js/WoltLabSuite/Core/Ui/Search/Extended.js b/wcfsetup/install/files/js/WoltLabSuite/Core/Ui/Search/Extended.js
index 953ec3d66f..4beb670ba3 100644
--- a/wcfsetup/install/files/js/WoltLabSuite/Core/Ui/Search/Extended.js
+++ b/wcfsetup/install/files/js/WoltLabSuite/Core/Ui/Search/Extended.js
@@ -39,9 +39,12 @@ define(["require", "exports", "tslib", "../../Ajax", "../../Date/Picker", "../..
             this.form.addEventListener("submit", (event) => {
                 event.preventDefault();
                 this.activePage = 1;
-                void this.search();
+                void this.search(0 /* Modify */);
             });
             this.typeInput.addEventListener("change", () => this.changeType());
+            window.addEventListener("popstate", () => {
+                this.initQueryString();
+            });
         }
         initKeywordSuggestions() {
             new Input_1.default(this.queryInput, {
@@ -56,12 +59,12 @@ define(["require", "exports", "tslib", "../../Ajax", "../../Date/Picker", "../..
                 filter.hidden = filter.dataset.objectType !== this.typeInput.value;
             });
         }
-        async search() {
+        async search(searchAction) {
             var _a;
             if (!this.queryInput.value.trim() && !this.usernameInput.value.trim()) {
                 return;
             }
-            this.updateQueryString();
+            this.updateQueryString(searchAction);
             (_a = this.lastSearchRequest) === null || _a === void 0 ? void 0 : _a.abort();
             const request = (0, Ajax_1.dboAction)("search", "wcf\\data\\search\\SearchAction").payload(this.getFormData());
             this.lastSearchRequest = request.getAbortController();
@@ -75,7 +78,7 @@ define(["require", "exports", "tslib", "../../Ajax", "../../Date/Picker", "../..
                 this.showSearchResults(template);
             }
         }
-        updateQueryString() {
+        updateQueryString(searchAction) {
             const url = new URL(this.form.action);
             url.search += url.search !== "" ? "&" : "?";
             const parameters = [];
@@ -88,7 +91,12 @@ define(["require", "exports", "tslib", "../../Ajax", "../../Date/Picker", "../..
                 parameters.push(["pageNo", this.activePage.toString()]);
             }
             url.search += new URLSearchParams(parameters);
-            window.history.replaceState({}, document.title, url.toString());
+            if (searchAction === 1 /* Init */) {
+                window.history.replaceState({}, document.title, url.toString());
+            }
+            else {
+                window.history.pushState({}, document.title, url.toString());
+            }
         }
         getFormData() {
             const data = {};
@@ -138,7 +146,7 @@ define(["require", "exports", "tslib", "../../Ajax", "../../Date/Picker", "../..
                 }
             });
             this.typeInput.dispatchEvent(new Event("change"));
-            void this.search();
+            void this.search(1 /* Init */);
         }
         initPagination(position) {
             const wrapperDiv = document.createElement("div");
-- 
2.20.1