refactor: move dropdown search inputs into dropdown

get rid of position-absolute on search inputs

install/package.json

@@ -108,10 +108,10 @@
         "nodebb-plugin-spam-be-gone": "2.3.0",
         "nodebb-plugin-web-push": "0.7.2",
         "nodebb-rewards-essentials": "1.0.0",
-        "nodebb-theme-harmony": "2.0.10",
+        "nodebb-theme-harmony": "2.0.11",
         "nodebb-theme-lavender": "7.1.17",
         "nodebb-theme-peace": "2.2.38",
-        "nodebb-theme-persona": "14.0.10",
+        "nodebb-theme-persona": "14.0.11",
         "nodebb-widget-essentials": "7.0.32",
         "nodemailer": "6.9.16",
         "nprogress": "0.2.0",

public/scss/admin/admin.scss

@@ -154,11 +154,9 @@ body {
 }
 
 .dropdown-left {
-	[component="category-selector-search"] { left:0!important; }
 	.dropdown-menu { --bs-position: start; }
 }
 .dropdown-right {
-	[component="category-selector-search"] { right:0!important;	}
 	.dropdown-menu { --bs-position: end; }
 }
 

public/scss/generics.scss

@@ -24,11 +24,9 @@
 	}
 }
 .dropdown-left {
-	[component="category-selector-search"] { left:0!important; }
 	.dropdown-menu { --bs-position: start; }
 }
 .dropdown-right {
-	[component="category-selector-search"] { right:0!important;	}
 	.dropdown-menu { --bs-position: end; }
 }
 

public/src/modules/categorySearch.js

@@ -21,16 +21,12 @@ define('categorySearch', ['alerts', 'bootstrap', 'api'], function (alerts, boots
 			return;
 		}
 
-		const toggleVisibility = searchEl.parent('[component="category/dropdown"]').length > 0 ||
+		const toggleVisibility = searchEl.parents('[component="category/dropdown"]').length > 0 ||
-			searchEl.parent('[component="category-selector"]').length > 0;
+			searchEl.parents('[component="category-selector"]').length > 0;
 
 		el.on('show.bs.dropdown', function () {
 			if (toggleVisibility) {
-				el.find('.dropdown-toggle').css({ visibility: 'hidden' });
 				searchEl.removeClass('hidden');
-				searchEl.css({
-					'z-index': el.find('.dropdown-toggle').css('z-index') + 1,
-				});
 			}
 
 			function doSearch() {
@@ -61,7 +57,6 @@ define('categorySearch', ['alerts', 'bootstrap', 'api'], function (alerts, boots
 
 		el.on('hide.bs.dropdown', function () {
 			if (toggleVisibility) {
-				el.find('.dropdown-toggle').css({ visibility: 'inherit' });
 				searchEl.addClass('hidden');
 			}
 

public/src/modules/groupSearch.js

@@ -11,7 +11,7 @@ define('groupSearch', function () {
 		if (!searchEl.length) {
 			return;
 		}
-		const toggleVisibility = searchEl.parent('[component="group-selector"]').length > 0;
+		const toggleVisibility = searchEl.parents('[component="group-selector"]').length > 0;
 
 		const groupEls = el.find('[component="group-list"] [data-name]');
 		el.on('show.bs.dropdown', function () {
@@ -31,11 +31,7 @@ define('groupSearch', function () {
 				el.find('[component="group-list"] [component="group-no-matches"]').toggleClass('hidden', !noMatch);
 			}
 			if (toggleVisibility) {
-				el.find('.dropdown-toggle').css({ visibility: 'hidden' });
 				searchEl.removeClass('hidden');
-				searchEl.css({
-					'z-index': el.find('.dropdown-toggle').css('z-index') + 1,
-				});
 			}
 
 			searchEl.on('click', function (ev) {
@@ -52,7 +48,6 @@ define('groupSearch', function () {
 
 		el.on('hide.bs.dropdown', function () {
 			if (toggleVisibility) {
-				el.find('.dropdown-toggle').css({ visibility: 'inherit' });
 				searchEl.addClass('hidden');
 			}
 			searchEl.off('click').find('input').off('keyup');

public/src/modules/tagFilter.js

@@ -27,16 +27,12 @@ define('tagFilter', ['hooks', 'alerts', 'bootstrap'], function (hooks, alerts, b
 		}
 		initialTags = selectedTags.slice();
 
-		const toggleSearchVisibilty = searchEl.parent('[component="tag/filter"]').length &&
+		const toggleSearchVisibilty = searchEl.parents('[component="tag/filter"]').length &&
 			app.user.privileges['search:tags'];
 
 		el.on('show.bs.dropdown', function () {
 			if (toggleSearchVisibilty) {
-				el.find('.dropdown-toggle').css({ visibility: 'hidden' });
 				searchEl.removeClass('hidden');
-				searchEl.css({
-					'z-index': el.find('.dropdown-toggle').css('z-index') + 1,
-				});
 			}
 
 			function doSearch() {
@@ -67,7 +63,6 @@ define('tagFilter', ['hooks', 'alerts', 'bootstrap'], function (hooks, alerts, b
 
 		el.on('hidden.bs.dropdown', function () {
 			if (toggleSearchVisibilty) {
-				el.find('.dropdown-toggle').css({ visibility: 'inherit' });
 				searchEl.addClass('hidden');
 			}
 

src/views/admin/manage/group.tpl

@@ -9,10 +9,13 @@
 				<button type="button" class="btn btn-ghost btn-sm dropdown-toggle w-100" data-bs-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
 					<span component="group-selector-selected">{group.displayName}</span> <span class="caret"></span>
 				</button>
-				<div component="group-selector-search" class="hidden position-absolute w-100">
+
-					<input type="text" class="form-control" autocomplete="off">
+				<div class="dropdown-menu p-1">
+					<div component="group-selector-search" class="p-1 hidden">
+						<input type="text" class="form-control form-control-sm" placeholder="[[search:type-to-search]]" autocomplete="off">
+						<hr class="mt-2 mb-0"/>
 					</div>
-				<ul component="group-list" class="dropdown-menu dropdown-menu-end group-dropdown-menu overflow-auto p-1" role="menu" style="max-height: 500px;">
+					<ul component="group-list" class="list-unstyled mb-0 text-sm dropdown-menu-end group-dropdown-menu overflow-auto ghost-scrollbar" role="menu" style="max-height: 500px;">
 						<li component="group-no-matches" role="presentation" class="group hidden">
 							<a class="dropdown-item rounded-1" role="menuitem">[[search:no-matches]]</a>
 						</li>
@@ -24,6 +27,7 @@
 					</ul>
 				</div>
 			</div>
+		</div>
 		<div class="col-12 col-md-4 px-0 px-md-3 ">
 			<button id="save" class="btn btn-primary btn-sm btn btn-primary btn-sm fw-semibold ff-secondary w-100 text-center text-nowrap">[[admin/admin:save-changes]]</button>
 		</div>
@@ -157,10 +161,13 @@
 						<button type="button" class="btn btn-ghost btn-sm d-flex gap-2 align-items-center flex-fill dropdown-toggle" data-bs-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
 							<i class="fa fa-fw fa-lock text-primary"></i> <span>[[admin/manage/groups:privileges]]</span> <span class="caret"></span>
 						</button>
-						<div component="category-selector-search" class="hidden position-absolute">
+
+						<div class="dropdown-menu p-1">
+							<div component="category-selector-search" class="p-1 hidden">
 								<input type="text" class="form-control form-control-sm" placeholder="[[search:type-to-search]]" autocomplete="off">
+								<hr class="mt-2 mb-0"/>
 							</div>
-						<ul component="category/list" class="dropdown-menu category-dropdown-menu dropdown-menu-end p-1" role="menu">
+							<ul component="category/list" class="list-unstyled mb-0 text-sm category-dropdown-menu dropdown-menu-end ghost-scrollbar" role="menu">
 								<li component="category/no-matches" role="presentation" class="category hidden">
 									<a class="dropdown-item" role="menuitem">[[search:no-matches]]</a>
 								</li>
@@ -179,6 +186,7 @@
 							</ul>
 						</div>
 					</div>
+				</div>
 
 				<a href="{config.relative_path}/api/admin/groups/{group.nameEncoded}/csv" class="btn btn-ghost btn-sm d-flex gap-2 align-items-center">
 					<i class="fa fa-fw fa-file-csv text-primary"></i>[[admin/manage/groups:members-csv]]</a>

src/views/admin/partials/categories/select-category.tpl

@@ -1,19 +1,21 @@
-<form type="form">
+<div class="mb-3">
-	<div class="form-group">
 	<div component="category-selector" class="btn-group">
-			<button type="button" class="btn btn-outline-secondary dropdown-toggle" data-bs-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
+		<button type="button" class="btn btn-ghost border dropdown-toggle" data-bs-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
 			<span component="category-selector-selected">[[topic:thread-tools.select-category]]</span> <span class="caret"></span>
 		</button>
-			<div component="category-selector-search" class="hidden position-absolute">
+
-				<input type="text" class="form-control" placeholder="[[search:type-to-search]]" autocomplete="off">
+		<div class="dropdown-menu p-1">
+			<div component="category-selector-search" class="p-1 hidden">
+				<input type="text" class="form-control form-control-sm" placeholder="[[search:type-to-search]]" autocomplete="off">
+				<hr class="mt-2 mb-0"/>
 			</div>
-			<ul component="category/list" class="dropdown-menu category-dropdown-menu" role="menu">
+			<ul component="category/list" class="list-unstyled mb-0 text-sm category-dropdown-menu ghost-scrollbar" role="menu">
 				<li component="category/no-matches" role="presentation" class="category hidden">
-					<a class="dropdown-item" role="menuitem">[[search:no-matches]]</a>
+					<a class="dropdown-item rounded-1" role="menuitem">[[search:no-matches]]</a>
 				</li>
 				{{{ each categories }}}
 				<li role="presentation" class="category {{{if categories.disabledClass}}}disabled{{{end}}}" data-cid="{categories.cid}" data-name="{categories.name}">
-					<a class="dropdown-item" role="menuitem">{categories.level}
+					<a class="dropdown-item rounded-1" role="menuitem">{categories.level}
 						<span component="category-markup">
 							<div class="category-item d-inline-block">
 								{buildCategoryIcon(@value, "24px", "rounded-circle")}
@@ -26,7 +28,8 @@
 			</ul>
 		</div>
 	</div>
-</form>
+</div>
+
 {{{ if message }}}
 <div>{message}</div>
 {{{ end }}}

src/views/admin/partials/category/selector-dropdown-content.tpl

@@ -11,10 +11,14 @@
 		</span>
 	</span> <span class="caret"></span>
 </button>
-<div component="category-selector-search" class="hidden position-absolute">
+
+<div class="dropdown-menu p-1">
+	<div component="category-selector-search" class="p-1 hidden">
 		<input type="text" class="form-control form-control-sm" placeholder="[[search:type-to-search]]" autocomplete="off">
+		<hr class="mt-2 mb-0"/>
 	</div>
-<ul component="category/list" class="dropdown-menu category-dropdown-menu p-1" role="menu">
+
+	<ul component="category/list" class="list-unstyled mb-0 text-sm category-dropdown-menu" role="menu">
 		<li component="category/no-matches" role="presentation" class="category hidden">
 			<a class="dropdown-item rounded-1" role="menu-item">[[search:no-matches]]</a>
 		</li>
@@ -33,3 +37,4 @@
 		</li>
 		{{{ end }}}
 	</ul>
+</div>

src/views/admin/partials/groups/privileges-select-category.tpl

@@ -1,25 +0,0 @@
-<div component="category-selector" class="btn-group">
-	<button type="button" class="btn btn-light btn-sm dropdown-toggle" data-bs-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
-		<i class="fa fa-fw fa-lock text-primary"></i> <span>[[admin/manage/groups:privileges]]</span> <span class="caret"></span>
-	</button>
-	<div component="category-selector-search" class="hidden position-absolute">
-		<input type="text" class="form-control form-control-sm" placeholder="[[search:type-to-search]]" autocomplete="off">
-	</div>
-	<ul component="category/list" class="dropdown-menu category-dropdown-menu dropdown-menu-end p-1" role="menu">
-		<li component="category/no-matches" role="presentation" class="category hidden">
-			<a class="dropdown-item" role="menuitem">[[search:no-matches]]</a>
-		</li>
-		{{{each categories}}}
-		<li role="presentation" class="category {{{ if categories.disabledClass }}}disabled{{{ end }}}" data-cid="{categories.cid}" data-name="{categories.name}" data-parent-cid="{categories.parentCid}">
-			<a class="dropdown-item rounded-1" role="menuitem">{categories.level}
-				<span component="category-markup">
-					<div class="category-item d-inline-block">
-						{buildCategoryIcon(@value, "24px", "rounded-circle")}
-						{./name}
-					</div>
-				</span>
-			</a>
-		</li>
-		{{{end}}}
-	</ul>
-</div>

src/views/partials/category/filter-dropdown-content.tpl

@@ -9,11 +9,12 @@
     <span class="d-none d-md-inline fw-semibold">[[unread:all-categories]]</span>{{{ end }}}
 </button>
 
-<div component="category-selector-search" class="hidden position-absolute" style="min-width: 120px;">
+<div class="dropdown-menu p-1">
+    <div component="category-selector-search" class="p-1 hidden">
         <input type="text" class="form-control form-control-sm" placeholder="[[search:type-to-search]]" autocomplete="off">
+        <hr class="mt-2 mb-0"/>
     </div>
 
-<div class="dropdown-menu p-1">
     <ul component="category/list" class="list-unstyled mb-0 text-sm category-dropdown-menu ghost-scrollbar" role="menu">
         <li role="presentation" class="category" data-cid="all">
             <a class="dropdown-item rounded-1 d-flex align-items-center gap-2" role="menuitem" href="{{{ if allCategoriesUrl }}}{config.relative_path}/{allCategoriesUrl}{{{ else }}}#{{{ end }}}">

src/views/partials/category/selector-dropdown-content.tpl

@@ -12,11 +12,11 @@
     </span>
 </button>
 
-<div component="category-selector-search" class="hidden position-absolute">
-    <input type="text" class="form-control form-control-sm" placeholder="[[search:type-to-search]]" autocomplete="off">
-</div>
-
 <div class="dropdown-menu p-1">
+    <div component="category-selector-search" class="p-1 hidden">
+        <input type="text" class="form-control form-control-sm" placeholder="[[search:type-to-search]]" autocomplete="off">
+        <hr class="mt-2 mb-0"/>
+    </div>
     <ul component="category/list" class="list-unstyled mb-0 text-sm category-dropdown-menu ghost-scrollbar" role="menu">
         <li component="category/no-matches" role="presentation" class="category hidden">
             <a class="dropdown-item rounded-1" role="menuitem">[[search:no-matches]]</a>

src/views/partials/flags/filters.tpl

@@ -23,11 +23,12 @@
 			{{{ end }}}
 			<span class="caret text-primary opacity-75"></span>
 		</button>
-		<div component="category-selector-search" class="hidden position-absolute">
-			<input type="text" class="form-control form-control-sm" placeholder="[[search:type-to-search]]" autocomplete="off">
-		</div>
 
 		<div class="dropdown-menu p-1">
+			<div component="category-selector-search" class="p-1 hidden">
+				<input type="text" class="form-control form-control-sm" placeholder="[[search:type-to-search]]" autocomplete="off">
+				<hr class="mt-2 mb-0"/>
+			</div>
 			<ul component="category/list" class="list-unstyled mb-0 text-sm category-dropdown-menu ghost-scrollbar" role="menu">
 				{{{each categoryItems}}}
 				<li role="presentation" class="category {{{ if ../disabledClass }}}disabled{{{ end }}}" data-cid="{../cid}" data-parent-cid="{../parentCid}" data-name="{../name}">

src/views/partials/tags/filter-dropdown-content.tpl

@@ -10,11 +10,11 @@
     {{{ end }}}
 </button>
 
-<div component="tag/filter/search" class="hidden position-absolute" style="min-width: 120px;">
-    <input type="text" class="form-control form-control-sm" placeholder="[[search:type-to-search]]" autocomplete="off">
-</div>
-
 <div class="dropdown-menu p-1">
+    <div component="tag/filter/search" class="p-1 hidden">
+        <input type="text" class="form-control form-control-sm" placeholder="[[search:type-to-search]]" autocomplete="off">
+        <hr class="mt-2 mb-0"/>
+    </div>
     <ul component="tag/filter/list" class="list-unstyled mb-0 text-sm overflow-auto ghost-scrollbar" role="menu" style="max-height: 500px;" role="menu">
         <li role="presentation" data-tag="">
             <a class="dropdown-item rounded-1 d-flex align-items-center gap-2" role="menuitem" href="#">