Unified the search bar behavior in the frontend and admin panel

diff --git a/ts/WoltLabSuite/Core/Ui/Search.ts b/ts/WoltLabSuite/Core/Ui/Search.ts
index 11733a98a480a9a610845ccb7764b9b055d4d3e5..77ca9f40e9fbd70190a01d9b6f0164d21c9fcfc8 100644 (file)
--- a/ts/WoltLabSuite/Core/Ui/Search.ts
+++ b/ts/WoltLabSuite/Core/Ui/Search.ts
@@ -13,6 +13,7 @@ import UiCloseOverlay, { Origin } from "./CloseOverlay";
 import UiDropdownSimple from "./Dropdown/Simple";
 import * as UiScreen from "./Screen";
 import * as Environment from "../Environment";
+import { identify } from "../Dom/Util";
 
 let _isMobile = false;
 let _scrollTop: number | undefined = undefined;
@@ -21,6 +22,7 @@ const _isAcp = document.body.classList.contains("wcfAcp");
 const _pageHeader = document.getElementById("pageHeader")!;
 const _pageHeaderPanel = document.getElementById("pageHeaderPanel")!;
 const _pageHeaderSearch = document.getElementById("pageHeaderSearch")!;
+let _pageHeaderSearchMobile: HTMLElement | undefined = undefined;
 const _pageHeaderSearchInput = document.getElementById("pageHeaderSearchInput") as HTMLInputElement;
 const _topMenu = document.getElementById("topMenu")!;
 const _userPanelSearchButton = document.getElementById("userPanelSearchButton");
@@ -31,6 +33,16 @@ const _userPanelSearchButton = document.getElementById("userPanelSearchButton");
 function initSearchBar(): void {
   _pageHeaderSearch.addEventListener("click", (event) => event.stopPropagation());
 
+  const searchType = document.querySelector(".pageHeaderSearchType") as HTMLElement;
+  const dropdownMenuId = identify(searchType);
+  const dropdownMenu = UiDropdownSimple.getDropdownMenu(dropdownMenuId)!;
+  dropdownMenu.addEventListener("click", (event) => {
+    // This prevents triggering the `UiCloseOverlay`.
+    event.stopPropagation();
+
+    UiDropdownSimple.close(dropdownMenuId);
+  });
+
   _userPanelSearchButton?.addEventListener("click", (event) => {
     event.preventDefault();
     event.stopPropagation();
@@ -50,16 +62,16 @@ function initSearchBar(): void {
       }
     }
 
-    if (_pageHeader.classList.contains("searchBarForceOpen")) {
-      return;
-    }
-
     closeSearch();
+
+    _pageHeaderSearchMobile?.setAttribute("aria-expanded", "false");
   });
 }
 
-function initSearchButton(): void {
+function initMobileSearch(): void {
   const searchButton = document.getElementById("pageHeaderSearchMobile")!;
+  _pageHeaderSearchMobile = searchButton;
+
   searchButton.addEventListener("click", (event) => {
     event.preventDefault();
     event.stopPropagation();
@@ -99,19 +111,6 @@ function initSearchButton(): void {
       searchButton.setAttribute("aria-expanded", "false");
     }
   });
-
-  UiCloseOverlay.add("WoltLabSuite/Core/Ui/MobileSearch", (origin, identifier) => {
-    if (!_isAcp && origin === Origin.DropDown) {
-      const button = document.getElementById("pageHeaderSearchTypeSelect")!;
-      if (button.dataset.target === identifier) {
-        return;
-      }
-    }
-
-    closeSearch();
-
-    searchButton.setAttribute("aria-expanded", "false");
-  });
 }
 
 function openSearch(): void {
@@ -173,7 +172,6 @@ export function init(): void {
   }
 
   initSearchBar();
-  initSearchButton();
 
   UiScreen.on("screen-md-down", {
     match() {
@@ -185,6 +183,8 @@ export function init(): void {
     },
     setup() {
       _isMobile = true;
+
+      initMobileSearch();
     },
   });
 

diff --git a/ts/WoltLabSuite/Core/Ui/Search/Page.ts b/ts/WoltLabSuite/Core/Ui/Search/Page.ts
index 2a71f01cc0fcc4c1362ded3694c035df864b371f..98cd1228ae7c3afdbdddad591008721b50f6ddff 100644 (file)
--- a/ts/WoltLabSuite/Core/Ui/Search/Page.ts
+++ b/ts/WoltLabSuite/Core/Ui/Search/Page.ts
@@ -7,16 +7,6 @@ import UiSearchInput from "./Input";
 
 function click(event: MouseEvent): void {
   event.preventDefault();
-  event.stopPropagation();
-
-  const searchType = document.querySelector(".pageHeaderSearchType") as HTMLElement;
-  UiDropdownSimple.close(DomUtil.identify(searchType))!;
-
-  const pageHeader = document.getElementById("pageHeader") as HTMLElement;
-  pageHeader.classList.add("searchBarForceOpen");
-  window.setTimeout(() => {
-    pageHeader.classList.remove("searchBarForceOpen");
-  }, 10);
 
   const target = event.currentTarget as HTMLElement;
   const objectType = target.dataset.objectType;

diff --git a/wcfsetup/install/files/js/WoltLabSuite/Core/Ui/Search.js b/wcfsetup/install/files/js/WoltLabSuite/Core/Ui/Search.js
index 49fb9347adc56c4b88442b60e86c93f5379729db..ae6ee6556b9f3ba01d4c7a8eab7b6e13edaae10c 100644 (file)
--- a/wcfsetup/install/files/js/WoltLabSuite/Core/Ui/Search.js
+++ b/wcfsetup/install/files/js/WoltLabSuite/Core/Ui/Search.js
@@ -6,7 +6,7 @@
  * @license  GNU Lesser General Public License <http://opensource.org/licenses/lgpl-license.php>
  * @module  WoltLabSuite/Core/Ui/Page/Header/Fixed
  */
-define(["require", "exports", "tslib", "../Event/Handler", "./Alignment", "./CloseOverlay", "./Dropdown/Simple", "./Screen", "../Environment"], function (require, exports, tslib_1, EventHandler, UiAlignment, CloseOverlay_1, Simple_1, UiScreen, Environment) {
+define(["require", "exports", "tslib", "../Event/Handler", "./Alignment", "./CloseOverlay", "./Dropdown/Simple", "./Screen", "../Environment", "../Dom/Util"], function (require, exports, tslib_1, EventHandler, UiAlignment, CloseOverlay_1, Simple_1, UiScreen, Environment, Util_1) {
     "use strict";
     Object.defineProperty(exports, "__esModule", { value: true });
     exports.init = void 0;
@@ -22,6 +22,7 @@ define(["require", "exports", "tslib", "../Event/Handler", "./Alignment", "./Clo
     const _pageHeader = document.getElementById("pageHeader");
     const _pageHeaderPanel = document.getElementById("pageHeaderPanel");
     const _pageHeaderSearch = document.getElementById("pageHeaderSearch");
+    let _pageHeaderSearchMobile = undefined;
     const _pageHeaderSearchInput = document.getElementById("pageHeaderSearchInput");
     const _topMenu = document.getElementById("topMenu");
     const _userPanelSearchButton = document.getElementById("userPanelSearchButton");
@@ -30,6 +31,14 @@ define(["require", "exports", "tslib", "../Event/Handler", "./Alignment", "./Clo
      */
     function initSearchBar() {
         _pageHeaderSearch.addEventListener("click", (event) => event.stopPropagation());
+        const searchType = document.querySelector(".pageHeaderSearchType");
+        const dropdownMenuId = (0, Util_1.identify)(searchType);
+        const dropdownMenu = Simple_1.default.getDropdownMenu(dropdownMenuId);
+        dropdownMenu.addEventListener("click", (event) => {
+            // This prevents triggering the `UiCloseOverlay`.
+            event.stopPropagation();
+            Simple_1.default.close(dropdownMenuId);
+        });
         _userPanelSearchButton === null || _userPanelSearchButton === void 0 ? void 0 : _userPanelSearchButton.addEventListener("click", (event) => {
             event.preventDefault();
             event.stopPropagation();
@@ -47,14 +56,13 @@ define(["require", "exports", "tslib", "../Event/Handler", "./Alignment", "./Clo
                     return;
                 }
             }
-            if (_pageHeader.classList.contains("searchBarForceOpen")) {
-                return;
-            }
             closeSearch();
+            _pageHeaderSearchMobile === null || _pageHeaderSearchMobile === void 0 ? void 0 : _pageHeaderSearchMobile.setAttribute("aria-expanded", "false");
         });
     }
-    function initSearchButton() {
+    function initMobileSearch() {
         const searchButton = document.getElementById("pageHeaderSearchMobile");
+        _pageHeaderSearchMobile = searchButton;
         searchButton.addEventListener("click", (event) => {
             event.preventDefault();
             event.stopPropagation();
@@ -85,16 +93,6 @@ define(["require", "exports", "tslib", "../Event/Handler", "./Alignment", "./Clo
                 searchButton.setAttribute("aria-expanded", "false");
             }
         });
-        CloseOverlay_1.default.add("WoltLabSuite/Core/Ui/MobileSearch", (origin, identifier) => {
-            if (!_isAcp && origin === CloseOverlay_1.Origin.DropDown) {
-                const button = document.getElementById("pageHeaderSearchTypeSelect");
-                if (button.dataset.target === identifier) {
-                    return;
-                }
-            }
-            closeSearch();
-            searchButton.setAttribute("aria-expanded", "false");
-        });
     }
     function openSearch() {
         CloseOverlay_1.default.execute();
@@ -143,7 +141,6 @@ define(["require", "exports", "tslib", "../Event/Handler", "./Alignment", "./Clo
             return;
         }
         initSearchBar();
-        initSearchButton();
         UiScreen.on("screen-md-down", {
             match() {
                 _isMobile = true;
@@ -154,6 +151,7 @@ define(["require", "exports", "tslib", "../Event/Handler", "./Alignment", "./Clo
             },
             setup() {
                 _isMobile = true;
+                initMobileSearch();
             },
         });
         EventHandler.add("com.woltlab.wcf.Search", "close", closeSearch);

diff --git a/wcfsetup/install/files/js/WoltLabSuite/Core/Ui/Search/Page.js b/wcfsetup/install/files/js/WoltLabSuite/Core/Ui/Search/Page.js
index 382a4dbed06ae1e2dfcff83bc66fea06b6348870..e675d5907c8c09a68050bedad42ace90058f17bb 100644 (file)
--- a/wcfsetup/install/files/js/WoltLabSuite/Core/Ui/Search/Page.js
+++ b/wcfsetup/install/files/js/WoltLabSuite/Core/Ui/Search/Page.js
@@ -10,14 +10,6 @@ define(["require", "exports", "tslib", "../../Core", "../../Dom/Traverse", "../.
     Input_1 = (0, tslib_1.__importDefault)(Input_1);
     function click(event) {
         event.preventDefault();
-        event.stopPropagation();
-        const searchType = document.querySelector(".pageHeaderSearchType");
-        Simple_1.default.close(Util_1.default.identify(searchType));
-        const pageHeader = document.getElementById("pageHeader");
-        pageHeader.classList.add("searchBarForceOpen");
-        window.setTimeout(() => {
-            pageHeader.classList.remove("searchBarForceOpen");
-        }, 10);
         const target = event.currentTarget;
         const objectType = target.dataset.objectType;
         const container = document.getElementById("pageHeaderSearchParameters");