Improved behavior of the mobile search

An already active overlay such as the mobile menu could cause the page to become scrollable.

See https://www.woltlab.com/community/thread/295731-mobil-%C3%B6ffnen-der-suche-nach-%C3%B6ffnen-eines-men%C3%BCs-fehlerhaft/

diff --git a/ts/WoltLabSuite/Core/Ui/CloseOverlay.ts b/ts/WoltLabSuite/Core/Ui/CloseOverlay.ts
index 980022ed87655490a48ea03d369f73d9f53def17..04ce4fd7d2034a942ec400993df1024ac4bec978 100644 (file)
--- a/ts/WoltLabSuite/Core/Ui/CloseOverlay.ts
+++ b/ts/WoltLabSuite/Core/Ui/CloseOverlay.ts
@@ -15,6 +15,7 @@ const _callbackList = new CallbackList();
 export enum Origin {
   Document = "document",
   DropDown = "dropdown",
+  Search = "search",
 }
 
 type Callback = (origin?: string | Origin, identifier?: string) => void;

diff --git a/ts/WoltLabSuite/Core/Ui/Search.ts b/ts/WoltLabSuite/Core/Ui/Search.ts
index 4b57e7829443f56cf500d82cd9d39a60513c5bf8..6c6c18952923b5304cca739ffabf9723d18e84bc 100644 (file)
--- a/ts/WoltLabSuite/Core/Ui/Search.ts
+++ b/ts/WoltLabSuite/Core/Ui/Search.ts
@@ -57,7 +57,9 @@ function initSearchBar(): void {
   });
 
   UiCloseOverlay.add("WoltLabSuite/Core/Ui/Search", (origin, identifier) => {
-    if (origin === Origin.DropDown) {
+    if (origin === Origin.Search) {
+      return;
+    } else if (origin === Origin.DropDown) {
       const button = document.getElementById("pageHeaderSearchTypeSelect")!;
       if (button.dataset.target === identifier) {
         return;
@@ -124,7 +126,7 @@ function initMobileSearch(): void {
 }
 
 function openSearch(): void {
-  UiCloseOverlay.execute();
+  UiCloseOverlay.execute(Origin.Search);
 
   _pageHeader.classList.add("searchBarOpen");
   _userPanelSearchButton?.parentElement!.classList.add("open");

diff --git a/wcfsetup/install/files/js/WoltLabSuite/Core/Ui/CloseOverlay.js b/wcfsetup/install/files/js/WoltLabSuite/Core/Ui/CloseOverlay.js
index ff3eac2165845af77705ab4628a33a3d7b10daf1..92344d36ce163a4089c916a91a77fe23363a77cf 100644 (file)
--- a/wcfsetup/install/files/js/WoltLabSuite/Core/Ui/CloseOverlay.js
+++ b/wcfsetup/install/files/js/WoltLabSuite/Core/Ui/CloseOverlay.js
@@ -17,6 +17,7 @@ define(["require", "exports", "tslib", "../CallbackList"], function (require, ex
     (function (Origin) {
         Origin["Document"] = "document";
         Origin["DropDown"] = "dropdown";
+        Origin["Search"] = "search";
     })(Origin = exports.Origin || (exports.Origin = {}));
     let hasGlobalListener = false;
     function add(identifier, callback) {

diff --git a/wcfsetup/install/files/js/WoltLabSuite/Core/Ui/Search.js b/wcfsetup/install/files/js/WoltLabSuite/Core/Ui/Search.js
index dc16344f2bad925b13dc6614a7cd07c504dc11b0..d05b6d6fa2a81888ac84d377e3275a06856ac67d 100644 (file)
--- a/wcfsetup/install/files/js/WoltLabSuite/Core/Ui/Search.js
+++ b/wcfsetup/install/files/js/WoltLabSuite/Core/Ui/Search.js
@@ -52,7 +52,10 @@ define(["require", "exports", "tslib", "../Event/Handler", "./Alignment", "./Clo
             }
         });
         CloseOverlay_1.default.add("WoltLabSuite/Core/Ui/Search", (origin, identifier) => {
-            if (origin === CloseOverlay_1.Origin.DropDown) {
+            if (origin === CloseOverlay_1.Origin.Search) {
+                return;
+            }
+            else if (origin === CloseOverlay_1.Origin.DropDown) {
                 const button = document.getElementById("pageHeaderSearchTypeSelect");
                 if (button.dataset.target === identifier) {
                     return;
@@ -104,7 +107,7 @@ define(["require", "exports", "tslib", "../Event/Handler", "./Alignment", "./Clo
         });
     }
     function openSearch() {
-        CloseOverlay_1.default.execute();
+        CloseOverlay_1.default.execute(CloseOverlay_1.Origin.Search);
         _pageHeader.classList.add("searchBarOpen");
         _userPanelSearchButton === null || _userPanelSearchButton === void 0 ? void 0 : _userPanelSearchButton.parentElement.classList.add("open");
         if (!_isMobile) {