Skip to content

Fix case studies filter search to show hidden tags immediately #229

New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Merged
IhorMasechko merged 5 commits into from
Dec 16, 2025
Merged

Fix case studies filter search to show hidden tags immediately #229

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
5 commits
Select commit Hold shift + click to select a range
b19951f
Fix case studies filter search to show hidden tags immediately
IhorMasechko Dec 16, 2025
404b981
Fix ESLint errors and remove lazy loading attributes
IhorMasechko Dec 16, 2025
c283c56
Optimize searchInputHandler by caching DOM query outside event handler
IhorMasechko Dec 16, 2025
ec860f4
Fix validation for defaultVisibleCount to prevent negative number bug
IhorMasechko Dec 16, 2025
5ea92f8
Merge branch 'main' into fix/search-hidden-categories-show-more
IhorMasechko Dec 16, 2025
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
43 changes: 36 additions & 7 deletions website/modules/asset/ui/src/searchInputHandler.js
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -12,6 +12,7 @@ const getTagLabel = function (tagItem) {

const showTagItem = function (tagItem) {
tagItem.style.display = '';
tagItem.classList.remove('tag-item--hidden');
};

const hideTagItem = function (tagItem) {
Expand All @@ -34,16 +35,30 @@ const toggleNoTagsMessage = function (container, hasVisible) {
* Implements filtering decisions — determines which tags should be shown.
*/

const filterTags = function (tagItems, filterValue, getLabel) {
const filterTags = function (
tagItems,
filterValue,
getLabel,
defaultVisibleCount,
) {
let hasVisible = false;

tagItems.forEach(function (tag) {
const match = getLabel(tag).includes(filterValue);
if (match) {
const isSearchActive = filterValue.length > 0;

tagItems.forEach(function (tag, index) {
if (isSearchActive) {
const match = getLabel(tag).includes(filterValue);
if (match) {
showTagItem(tag);
hasVisible = true;
} else {
hideTagItem(tag);
}
} else if (index < defaultVisibleCount) {
showTagItem(tag);
hasVisible = true;
} else {
hideTagItem(tag);
tag.style.display = '';
tag.classList.add('tag-item--hidden');
}
});

Expand All @@ -70,13 +85,27 @@ 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;
}
}
Comment thread
coderabbitai[bot] marked this conversation as resolved.

const handler = function () {
const filterValue = input.value.trim().toLowerCase();
const container = input.closest(containerSelector);
if (!container) return;

const tagItems = container.querySelectorAll(tagSelector);
const hasVisible = filterTags(tagItems, filterValue, getTagLabelFn);
const hasVisible = filterTags(
tagItems,
filterValue,
getTagLabelFn,
defaultVisibleCount,
);
toggleNoTagsMessage(container, hasVisible);
};

Expand Down
1 change: 0 additions & 1 deletion website/modules/case-studies-page/views/show.html
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -159,7 +159,6 @@
class="cs_partnership-logo"
src="{{ apos.attachment.url(partnerLogo, { size: 'full' }) }}"
alt="{{ partnerLogo._alt or partner.title or '' }}"
loading="lazy"
width="{{ apos.attachment.getWidth(partnerLogo) }}"
height="{{ apos.attachment.getHeight(partnerLogo) }}"
/>
Expand Down
Loading