[910, 933] Fix CS filter search & Show More / Show Less behavior on mobile

website/modules/asset/ui/src/filterModal.js

@@ -85,9 +85,21 @@ export class FilterModal {
     if (this.tagsFilter) this.modalBody.appendChild(this.tagsFilter);
     this.modal.classList.add('active');
     document.body.style.overflow = 'hidden';
+
+    if (this.tagsFilter) {
+      this.tagsFilter.style.maxHeight = 'none';
+      this.tagsFilter.style.overflowY = 'visible';
+      this.tagsFilter.style.overflowX = 'visible';
+    }
   }
 
   close() {
+    if (this.tagsFilter) {
+      this.tagsFilter.style.maxHeight = '';
+      this.tagsFilter.style.overflowY = '';
+      this.tagsFilter.style.overflowX = '';
+    }
+
     const elementsToRestore = [
       { element: this.clearAll, parent: this.originalParents.clearAll },
       { element: this.selectedTags, parent: this.originalParents.selectedTags },

website/modules/asset/ui/src/initCaseStudiesFilterHandler.js

@@ -122,8 +122,12 @@ const setupFilterAccessibility = function () {
 };
 
 // Helper function to collapse tags with animation
-const collapseTagsWithAnimation = function (allItems, button, textElement) {
-  if (!allItems || !button || !textElement) return;
+const collapseTagsWithAnimation = function (
+  itemsToProcess,
+  button,
+  textElement,
+) {
+  if (!itemsToProcess || !button || !textElement) return;
 
   // Prevent double-clicking during animation
   if (button.dataset.animating === 'true') {
@@ -137,9 +141,11 @@ const collapseTagsWithAnimation = function (allItems, button, textElement) {
   textElement.textContent = 'Show more';
 
   // Immediately hide items that should be hidden (no animation delay)
-  allItems.forEach(function (item, index) {
+  itemsToProcess.forEach(function (item, index) {
     if (index >= getDefaultVisibleTagsCount()) {
       item.classList.add('tag-item--hidden');
+    } else {
+      item.classList.remove('tag-item--hidden');
     }
   });
 
@@ -150,8 +156,8 @@ const collapseTagsWithAnimation = function (allItems, button, textElement) {
 };
 
 // Helper function to expand tags with animation
-const expandTagsWithAnimation = function (allItems, button, textElement) {
-  if (!allItems || !button || !textElement) return;
+const expandTagsWithAnimation = function (itemsToProcess, button, textElement) {
+  if (!itemsToProcess || !button || !textElement) return;
 
   // Prevent double-clicking during animation
   if (button.dataset.animating === 'true') {
@@ -167,7 +173,7 @@ const expandTagsWithAnimation = function (allItems, button, textElement) {
   // Show all items with staggered animation for smooth effect
   let expandCounter = 0;
   let maxDelay = 0;
-  allItems.forEach(function (item, index) {
+  itemsToProcess.forEach(function (item, index) {
     if (index >= getDefaultVisibleTagsCount()) {
       const delay = expandCounter * 50;
       maxDelay = Math.max(maxDelay, delay);
@@ -199,13 +205,31 @@ const setupShowMoreHandlers = function () {
     if (!button) return;
 
     const filterContent = button.closest('.filter-content');
-    const allItems = filterContent.querySelectorAll('.tag-item');
+    if (!filterContent) return;
+
+    const searchInput = filterContent.querySelector('.tag-search');
+    const isSearchActive = searchInput && searchInput.value.trim().length > 0;
+
     const textElement = button.querySelector('.tags__show-more--text');
+    const allItems = filterContent.querySelectorAll('.tag-item');
+
+    if (isSearchActive) {
+      const matchingItems = Array.from(allItems).filter(function (item) {
+        return item.style.display !== 'none';
+      });
 
-    if (button.classList.contains('tags__show-more--expanded')) {
-      collapseTagsWithAnimation(allItems, button, textElement);
+      if (button.classList.contains('tags__show-more--expanded')) {
+        collapseTagsWithAnimation(matchingItems, button, textElement);
+      } else {
+        expandTagsWithAnimation(matchingItems, button, textElement);
+      }
     } else {
-      expandTagsWithAnimation(allItems, button, textElement);
+      const allItemsArray = Array.from(allItems);
+      if (button.classList.contains('tags__show-more--expanded')) {
+        collapseTagsWithAnimation(allItemsArray, button, textElement);
+      } else {
+        expandTagsWithAnimation(allItemsArray, button, textElement);
+      }
     }
   };
 

website/modules/asset/ui/src/scss/_cases.scss

@@ -198,7 +198,7 @@
       }
 
       ~ .filter-content {
-        max-height: 1000px;
+        max-height: 5000px;
         opacity: 1;
         transform: translateY(0);
         padding-bottom: 24px;
@@ -1274,6 +1274,9 @@
 
   .tags-filter {
     max-width: none;
+    max-height: none;
+    overflow-y: visible;
+    overflow-x: visible;
   }
 
   &__backdrop {
@@ -1295,7 +1298,7 @@
     min-width: 300px;
     background: #fff;
     z-index: 2;
-    padding: 0 16px 24px;
+    padding: 0 16px 60px;
     max-height: 90vh;
     overflow-y: auto;
     box-shadow: 0 8px 32px rgba($black, 0.18);

website/modules/asset/ui/src/searchInputHandler.js

@@ -87,21 +87,68 @@ const getDefaultVisibleCount = function (container) {
   return defaultVisibleCount;
 };
 
+const countVisibleItems = function (container) {
+  const tagItems = container.querySelectorAll('.tag-item');
+  let visibleCount = 0;
+  tagItems.forEach(function (item) {
+    if (
+      item.style.display !== 'none' &&
+      !item.classList.contains('tag-item--hidden')
+    ) {
+      visibleCount += 1;
+    }
+  });
+  return visibleCount;
+};
+
+const handleSearchActiveState = function (
+  showMoreButton,
+  container,
+  defaultVisibleCount,
+) {
+  const visibleCount = countVisibleItems(container);
+  if (visibleCount <= defaultVisibleCount) {
+    showMoreButton.style.display = 'none';
+  } else {
+    showMoreButton.style.display = 'flex';
+    const textElement = showMoreButton.querySelector('.tags__show-more--text');
+    if (textElement) {
+      showMoreButton.classList.add('tags__show-more--expanded');
+      textElement.textContent = 'Show less';
+    }
+  }
+};
+
+const handleSearchInactiveState = function (
+  showMoreButton,
+  totalTags,
+  defaultVisibleCount,
+) {
+  const textElement = showMoreButton.querySelector('.tags__show-more--text');
+  if (textElement) {
+    showMoreButton.classList.remove('tags__show-more--expanded');
+    textElement.textContent = 'Show more';
+  }
+  if (totalTags > defaultVisibleCount) {
+    showMoreButton.style.display = 'flex';
+  } else {
+    showMoreButton.style.display = 'none';
+  }
+};
+
 const toggleShowMoreButtonVisibility = function (
   container,
   isSearchActive,
   totalTags,
   defaultVisibleCount,
 ) {
   const showMoreButton = container.querySelector('.tags__show-more');
-  if (showMoreButton) {
-    if (isSearchActive) {
-      showMoreButton.style.display = 'none';
-    } else if (totalTags > defaultVisibleCount) {
-      showMoreButton.style.display = 'flex';
-    } else {
-      showMoreButton.style.display = 'none';
-    }
+  if (!showMoreButton) return;
+
+  if (isSearchActive) {
+    handleSearchActiveState(showMoreButton, container, defaultVisibleCount);
+  } else {
+    handleSearchInactiveState(showMoreButton, totalTags, defaultVisibleCount);
   }
 };
 

website/modules/testimonials/index.js

@@ -106,6 +106,10 @@ module.exports = {
         label: 'Organization',
         name: 'organization',
       },
+      _caseStudy: {
+        label: 'Related Case Study',
+        name: '_caseStudy.0.title',
+      },
     },
   },
   filters: {