fix(case-studies): search UX, history, and piece-page req handling

- Drive clear button visibility by class only; remove dead CSS/placeholder rule
- Use type=text to avoid native search clear conflicting with custom clear
- performSearch: use location.assign only (no pushState+reload phantom history)
- handleSearchInput: close over clearButton; remove no-op focus() before navigate
- SearchService: buildSearchCondition, 200-char cap, Prettier  format
- Chain parent beforeIndex/beforeShow so req.data is set before getFilters
- Do not reassign query from filterByIndexPage (it returns undefined; fixes query.req)

Author: Ihor Masechko

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

@@ -178,10 +178,6 @@
   display: flex;
 }
 
-.cs_search-bar-input-wrapper:focus-within .cs_search-bar-input::placeholder {
-  color: $gray-300;
-}
-
 // Tags styling
 .tags-filter {
   border: 1px solid $gray-border;

website/modules/case-studies-page/index.js

@@ -15,14 +15,9 @@ const buildIndexQuery = function (self, req) {
     .perPage(self.perPage);
   self.filterByIndexPage(query, req.data.page);
 
-  const regexPattern = SearchService.buildSearchRegexPattern(searchTerm);
-  if (regexPattern) {
-    query.and({
-      $or: [
-        { title: { $regex: regexPattern, $options: 'i' } },
-        { portfolioTitle: { $regex: regexPattern, $options: 'i' } },
-      ],
-    });
+  const searchCondition = SearchService.buildSearchCondition(searchTerm);
+  if (searchCondition) {
+    query.and(searchCondition);
   }
   return query;
 };
@@ -92,11 +87,19 @@ module.exports = {
   },
 
   init(self) {
+    const superBeforeIndex = self.beforeIndex;
     self.beforeIndex = async (req) => {
+      if (superBeforeIndex) {
+        await superBeforeIndex(req);
+      }
       await self.setupIndexData(req);
     };
 
+    const superBeforeShow = self.beforeShow;
     self.beforeShow = async (req) => {
+      if (superBeforeShow) {
+        await superBeforeShow(req);
+      }
       await self.setupShowData(req);
     };
   },

website/modules/case-studies-page/services/NavigationService.js

@@ -79,16 +79,11 @@ class NavigationService {
    */
   static applySearchFilter(filteredQuery, req) {
     const searchTerm = SearchService.getSearchTerm(req.query || {});
-    const regexPattern = SearchService.buildSearchRegexPattern(searchTerm);
-    if (!regexPattern) {
+    const searchCondition = SearchService.buildSearchCondition(searchTerm);
+    if (!searchCondition) {
       return filteredQuery;
     }
-    return filteredQuery.and({
-      $or: [
-        { title: { $regex: regexPattern, $options: 'i' } },
-        { portfolioTitle: { $regex: regexPattern, $options: 'i' } },
-      ],
-    });
+    return filteredQuery.and(searchCondition);
   }
 
   /**

website/modules/case-studies-page/services/SearchService.js

@@ -7,37 +7,68 @@
 
 const REGEX_ESCAPE = /[$()*+.?[\\\]^{|}]/gu;
 
+const MAX_SEARCH_TERM_LENGTH = 200;
+
 /**
  * Normalizes search param from query (handles missing, array, non-string)
  * @param {Object} queryParams - Request query object (e.g. req.query)
  * @returns {string} Trimmed search string, or empty string
  */
-function getSearchTerm(queryParams) {
+const getSearchTerm = function (queryParams) {
   if (!queryParams || !queryParams.search) {
     return '';
   }
   const raw = queryParams.search;
-  const value = Array.isArray(raw) ? raw[0] : raw;
+  let value = raw;
+  if (Array.isArray(raw)) {
+    [value] = raw;
+  }
   if (typeof value !== 'string') {
     return '';
   }
   return value.trim();
-}
+};
 
 /**
  * Builds a safe MongoDB regex pattern from search term (escape + word match)
+ * Search term is capped at MAX_SEARCH_TERM_LENGTH to avoid pathologically long patterns
  * @param {string} searchTerm - User search string
  * @returns {string|null} Pattern for $regex, or null if no search
  */
-function buildSearchRegexPattern(searchTerm) {
+const buildSearchRegexPattern = function (searchTerm) {
   if (!searchTerm || !searchTerm.trim()) {
     return null;
   }
-  const escaped = searchTerm.trim().replace(REGEX_ESCAPE, '\\$&');
+  const trimmed = searchTerm.trim();
+  if (!trimmed) {
+    return null;
+  }
+  let capped = trimmed;
+  if (trimmed.length > MAX_SEARCH_TERM_LENGTH) {
+    capped = trimmed.slice(0, MAX_SEARCH_TERM_LENGTH);
+  }
+  const escaped = capped.replace(REGEX_ESCAPE, '\\$&');
   return escaped.split(/\s+/u).join('.*');
-}
+};
+
+/**
+ * Builds MongoDB $or condition for case study search (single source of truth for searchable fields)
+ * @param {string} searchTerm - User search string
+ * @returns {Object|null} Condition to pass to query.and(), or null if no search
+ */
+const buildSearchCondition = function (searchTerm) {
+  const regexPattern = buildSearchRegexPattern(searchTerm);
+  if (!regexPattern) {
+    return null;
+  }
+  const regexOpts = { $regex: regexPattern, $options: 'i' };
+  return {
+    $or: [{ title: regexOpts }, { portfolioTitle: regexOpts }],
+  };
+};
 
 module.exports = {
-  getSearchTerm,
+  buildSearchCondition,
   buildSearchRegexPattern,
+  getSearchTerm,
 };

website/modules/case-studies-page/views/index.html

@@ -29,7 +29,7 @@
             aria-hidden="true"
           />
           <input
-            type="search"
+            type="text"
             class="cs_search-bar-input"
             id="case-studies-search"
             name="search"

website/public/js/modules/case-studies-page/search-handler.js

@@ -29,28 +29,25 @@
     return newUrl;
   }
 
-  // Update URL and reload page
+  // Navigate to URL with updated search (single history entry; Back works as expected)
   function performSearch(searchValue) {
     const newUrl = buildSearchUrl(searchValue);
-    history.pushState({ clientSideFilter: true, url: newUrl }, '', newUrl);
-    window.location.reload();
+    window.location.assign(newUrl);
   }
 
-  // Update clear button visibility
+  const VISIBLE_CLASS = 'cs_search-bar-clear--visible';
+
+  // Sync clear button visibility via CSS class (no inline styles; CSS rules control display)
   function updateClearButtonVisibility(searchInput, clearButton) {
-    if (searchInput && clearButton) {
-      if (searchInput.value && searchInput.value.trim()) {
-        clearButton.style.display = 'flex';
-      } else {
-        clearButton.style.display = 'none';
-      }
+    if (!searchInput || !clearButton) {
+      return;
+    }
+    const hasValue = searchInput.value && searchInput.value.trim();
+    if (hasValue) {
+      clearButton.classList.add(VISIBLE_CLASS);
+    } else {
+      clearButton.classList.remove(VISIBLE_CLASS);
     }
-  }
-
-  // Handle search input (only update clear button; search runs on Enter)
-  function handleSearchInput(event) {
-    const clearButton = document.querySelector('.cs_search-bar-clear');
-    updateClearButtonVisibility(event.target, clearButton);
   }
 
   // Handle clear button click
@@ -63,7 +60,6 @@
     if (searchInput) {
       searchInput.value = '';
       updateClearButtonVisibility(searchInput, clearButton);
-      searchInput.focus();
       performSearch('');
     }
   }
@@ -97,7 +93,11 @@
       return;
     }
 
-    // Add input event listener
+    function handleSearchInput(event) {
+      updateClearButtonVisibility(event.target, clearButton);
+    }
+
+    // Add input event listener (handler closes over clearButton; no live query per keystroke)
     searchInput.addEventListener('input', handleSearchInput);
 
     // Add form submit handler