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 ||
-			searchEl.parent('[component="category-selector"]').length > 0;
+		const toggleVisibility = searchEl.parents('[component="category/dropdown"]').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,19 +9,23 @@
 				<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="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>
+						{{{ each groupNames }}}
+						<li role="presentation" class="group" data-name="{groupNames.displayName}">
+							<a class="dropdown-item rounded-1" href="{config.relative_path}/admin/manage/groups/{groupNames.encodedName}" role="menuitem">{groupNames.displayName}</a>
+						</li>
+						{{{ end }}}
+					</ul>
 				</div>
-				<ul component="group-list" class="dropdown-menu dropdown-menu-end group-dropdown-menu overflow-auto p-1" 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>
-					{{{ each groupNames }}}
-					<li role="presentation" class="group" data-name="{groupNames.displayName}">
-						<a class="dropdown-item rounded-1" href="{config.relative_path}/admin/manage/groups/{groupNames.encodedName}" role="menuitem">{groupNames.displayName}</a>
-					</li>
-					{{{ end }}}
-				</ul>
 			</div>
 		</div>
 		<div class="col-12 col-md-4 px-0 px-md-3 ">
@@ -157,26 +161,30 @@
 						<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">
-							<input type="text" class="form-control form-control-sm" 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="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>
+								{{{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>
-						<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>
 				</div>
 

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

@@ -1,19 +1,21 @@
-<form type="form">
-	<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">
-				<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="mb-3">
+	<div component="category-selector" class="btn-group">
+		<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 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,25 +11,30 @@
 		</span>
 	</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 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" 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>
+		{{{each categoryItems}}}
+		<li role="presentation" class="category {{{ if ./disabledClass }}}disabled {{{ end }}}" data-cid="{./cid}" data-name="{./name}" data-parent-cid="{./parentCid}">
+			<a href="#" class="dropdown-item rounded-1" role="menu-item">{./level}
+				<span component="category-markup" style="{{{ if ./match }}}font-weight: bold;{{{end}}}">
+					<div class="category-item d-inline-flex align-items-center gap-1">
+						{{{ if ./icon }}}
+						{buildCategoryIcon(@value, "24px", "rounded-circle")}
+						{{{ end }}}
+						{./name}
+					</div>
+				</span>
+			</a>
+		</li>
+		{{{ end }}}
+	</ul>
 </div>
-<ul component="category/list" class="dropdown-menu category-dropdown-menu p-1" 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>
-	{{{each categoryItems}}}
-	<li role="presentation" class="category {{{ if ./disabledClass }}}disabled {{{ end }}}" data-cid="{./cid}" data-name="{./name}" data-parent-cid="{./parentCid}">
-		<a href="#" class="dropdown-item rounded-1" role="menu-item">{./level}
-			<span component="category-markup" style="{{{ if ./match }}}font-weight: bold;{{{end}}}">
-				<div class="category-item d-inline-flex align-items-center gap-1">
-					{{{ if ./icon }}}
-					{buildCategoryIcon(@value, "24px", "rounded-circle")}
-					{{{ end }}}
-					{./name}
-				</div>
-			</span>
-		</a>
-	</li>
-	{{{ end }}}
-</ul>

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;">
-    <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 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="#">