From a8eab57c8a3b3994720629238e8e048ff1a249c5 Mon Sep 17 00:00:00 2001 From: Ihor Masechko Date: Fri, 19 Dec 2025 21:12:21 +0200 Subject: [PATCH 1/4] Hide show more button when tag search is active - Hide "show more" button when search input has text - Restore button visibility when search is cleared based on total tag count - Improve UX by removing unnecessary button during filtered search --- .../modules/asset/ui/src/searchInputHandler.js | 15 +++++++++++++++ 1 file changed, 15 insertions(+) diff --git a/website/modules/asset/ui/src/searchInputHandler.js b/website/modules/asset/ui/src/searchInputHandler.js index c2b222e9..8680bae9 100644 --- a/website/modules/asset/ui/src/searchInputHandler.js +++ b/website/modules/asset/ui/src/searchInputHandler.js @@ -100,6 +100,7 @@ const setupTagSearchForInput = function (input, options) { if (!container) return; const tagItems = container.querySelectorAll(tagSelector); + const isSearchActive = filterValue.length > 0; const hasVisible = filterTags( tagItems, filterValue, @@ -107,6 +108,20 @@ const setupTagSearchForInput = function (input, options) { defaultVisibleCount, ); toggleNoTagsMessage(container, hasVisible); + + const showMoreButton = container.querySelector('.tags__show-more'); + if (showMoreButton) { + if (isSearchActive) { + showMoreButton.style.display = 'none'; + } else { + const totalTags = tagItems.length; + if (totalTags > defaultVisibleCount) { + showMoreButton.style.display = 'flex'; + } else { + showMoreButton.style.display = 'none'; + } + } + } }; input.tagSearchHandler = handler; From a67b2be2ffd11e04ab490c4dbf75f9ae7388790e Mon Sep 17 00:00:00 2001 From: Ihor Masechko Date: Fri, 19 Dec 2025 21:19:29 +0200 Subject: [PATCH 2/4] Hide show more button when tag search is active and refactor code --- .../asset/ui/src/searchInputHandler.js | 57 ++++++++++++------- 1 file changed, 36 insertions(+), 21 deletions(-) diff --git a/website/modules/asset/ui/src/searchInputHandler.js b/website/modules/asset/ui/src/searchInputHandler.js index 8680bae9..a24e1d6e 100644 --- a/website/modules/asset/ui/src/searchInputHandler.js +++ b/website/modules/asset/ui/src/searchInputHandler.js @@ -76,6 +76,35 @@ const removePreviousHandler = function (input) { } }; +const getDefaultVisibleCount = function () { + const csContainer = document.querySelector('.cs_container'); + let defaultVisibleCount = 5; + if (csContainer) { + const parsed = parseInt(csContainer.dataset.defaultVisibleTags, 10); + if (parsed > 0) { + defaultVisibleCount = parsed; + } + } + return defaultVisibleCount; +}; + +const toggleShowMoreButtonVisibility = function ( + container, + isSearchActive, + totalTags, + defaultVisibleCount, +) { + const showMoreButton = container.querySelector('.tags__show-more'); + if (showMoreButton) { + if (isSearchActive) { + showMoreButton.style.display = 'none'; + } else { + showMoreButton.style.display = + totalTags > defaultVisibleCount ? 'flex' : 'none'; + } + } +}; + const setupTagSearchForInput = function (input, options) { const { containerSelector, @@ -85,14 +114,7 @@ const setupTagSearchForInput = function (input, options) { removePreviousHandler(input); - const csContainer = document.querySelector('.cs_container'); - let defaultVisibleCount = 5; - if (csContainer) { - const parsed = parseInt(csContainer.dataset.defaultVisibleTags, 10); - if (parsed > 0) { - defaultVisibleCount = parsed; - } - } + const defaultVisibleCount = getDefaultVisibleCount(); const handler = function () { const filterValue = input.value.trim().toLowerCase(); @@ -109,19 +131,12 @@ const setupTagSearchForInput = function (input, options) { ); toggleNoTagsMessage(container, hasVisible); - const showMoreButton = container.querySelector('.tags__show-more'); - if (showMoreButton) { - if (isSearchActive) { - showMoreButton.style.display = 'none'; - } else { - const totalTags = tagItems.length; - if (totalTags > defaultVisibleCount) { - showMoreButton.style.display = 'flex'; - } else { - showMoreButton.style.display = 'none'; - } - } - } + toggleShowMoreButtonVisibility( + container, + isSearchActive, + tagItems.length, + defaultVisibleCount, + ); }; input.tagSearchHandler = handler; From 5200d20612ac70a45fd704c2f635bda6427cd4e1 Mon Sep 17 00:00:00 2001 From: Ihor Masechko Date: Fri, 19 Dec 2025 21:36:44 +0200 Subject: [PATCH 3/4] refactor(asset/ui): improve searchInputHandler container handling - Fix no-ternary lint error by replacing ternary with if/else - Remove hardcoded .cs_container selector coupling - Eliminate redundant isSearchActive computation --- .../asset/ui/src/searchInputHandler.js | 20 ++++++++++--------- 1 file changed, 11 insertions(+), 9 deletions(-) diff --git a/website/modules/asset/ui/src/searchInputHandler.js b/website/modules/asset/ui/src/searchInputHandler.js index a24e1d6e..a0d6e956 100644 --- a/website/modules/asset/ui/src/searchInputHandler.js +++ b/website/modules/asset/ui/src/searchInputHandler.js @@ -40,9 +40,9 @@ const filterTags = function ( filterValue, getLabel, defaultVisibleCount, + isSearchActive, ) { let hasVisible = false; - const isSearchActive = filterValue.length > 0; tagItems.forEach(function (tag, index) { if (isSearchActive) { @@ -76,11 +76,10 @@ const removePreviousHandler = function (input) { } }; -const getDefaultVisibleCount = function () { - const csContainer = document.querySelector('.cs_container'); +const getDefaultVisibleCount = function (container) { let defaultVisibleCount = 5; - if (csContainer) { - const parsed = parseInt(csContainer.dataset.defaultVisibleTags, 10); + if (container) { + const parsed = parseInt(container.dataset.defaultVisibleTags, 10); if (parsed > 0) { defaultVisibleCount = parsed; } @@ -99,8 +98,11 @@ const toggleShowMoreButtonVisibility = function ( if (isSearchActive) { showMoreButton.style.display = 'none'; } else { - showMoreButton.style.display = - totalTags > defaultVisibleCount ? 'flex' : 'none'; + if (totalTags > defaultVisibleCount) { + showMoreButton.style.display = 'flex'; + } else { + showMoreButton.style.display = 'none'; + } } } }; @@ -114,13 +116,12 @@ const setupTagSearchForInput = function (input, options) { removePreviousHandler(input); - const defaultVisibleCount = getDefaultVisibleCount(); - const handler = function () { const filterValue = input.value.trim().toLowerCase(); const container = input.closest(containerSelector); if (!container) return; + const defaultVisibleCount = getDefaultVisibleCount(container); const tagItems = container.querySelectorAll(tagSelector); const isSearchActive = filterValue.length > 0; const hasVisible = filterTags( @@ -128,6 +129,7 @@ const setupTagSearchForInput = function (input, options) { filterValue, getTagLabelFn, defaultVisibleCount, + isSearchActive, ); toggleNoTagsMessage(container, hasVisible); From 8957ae08e3ecc9382a2630d043488d61ea16e8f5 Mon Sep 17 00:00:00 2001 From: Ihor Masechko Date: Fri, 19 Dec 2025 21:42:35 +0200 Subject: [PATCH 4/4] refactor(asset): fix lint issues and improve searchInputHandler --- website/modules/asset/ui/src/searchInputHandler.js | 8 +++----- 1 file changed, 3 insertions(+), 5 deletions(-) diff --git a/website/modules/asset/ui/src/searchInputHandler.js b/website/modules/asset/ui/src/searchInputHandler.js index a0d6e956..3c3c2964 100644 --- a/website/modules/asset/ui/src/searchInputHandler.js +++ b/website/modules/asset/ui/src/searchInputHandler.js @@ -97,12 +97,10 @@ const toggleShowMoreButtonVisibility = function ( if (showMoreButton) { if (isSearchActive) { showMoreButton.style.display = 'none'; + } else if (totalTags > defaultVisibleCount) { + showMoreButton.style.display = 'flex'; } else { - if (totalTags > defaultVisibleCount) { - showMoreButton.style.display = 'flex'; - } else { - showMoreButton.style.display = 'none'; - } + showMoreButton.style.display = 'none'; } } };