[DOCSENG-132]: prevent auto-expanding of grouped listing collapses

assets/scripts/components/grouped-item-listings.js

@@ -11,10 +11,10 @@ export function initializeGroupedListings() {
     const searchKeywords = url.searchParams.get('search');
     const form = document.getElementById('rules');
     let keyupTimeout;
-    let filters;
+    let filterButtons;
 
     if (controls) {
-       filters = controls.querySelectorAll('[data-ref="filter"]');
+       filterButtons = controls.querySelectorAll('[data-ref="filter"]');
     }
 
     // Returns array of results filtered by category and/or user search value
@@ -35,17 +35,12 @@ export function initializeGroupedListings() {
         return results;
     }
 
-    const activateButton = (activeButton, siblings) => {
-        if (activeButton && siblings) {
-            for (let i = 0; i < siblings.length; i++) {
-                const button = siblings[i];
-                button.classList[button.dataset.filter === activeButton.dataset.filter ? 'add' : 'remove']('active');
-            }
-        }
-
-        // enable all
-        allGroupHeaders.forEach(elm => {
-            elm.classList.add('active');
+    const setActiveCategoryFilterButton = (newCategoryFilter) => {
+        if (!filterButtons?.length) return;
+
+        filterButtons.forEach(button => {            
+            const isActive = button.dataset.filter === newCategoryFilter;
+            button.classList.toggle('active', isActive);
         });
     }
 
@@ -103,11 +98,13 @@ export function initializeGroupedListings() {
             return;
 
         const searchValue = inputSearch.value.length >= 2 ? inputSearch.value.toLowerCase().trim() : '';
-        url.searchParams.set('category', event.target.dataset.filter)
+        const selectedCategory = event.target.dataset.filter;
+
+        url.searchParams.set('category', selectedCategory)
         window.history.pushState(null,'', url.toString())
 
-        const filtered = filterResults(event.target.dataset.filter, searchValue);
-        activateButton(event.target, filters);
+        const filtered = filterResults(selectedCategory, searchValue);
+        setActiveCategoryFilterButton(selectedCategory);
         showResults(filtered);
     }
 
@@ -154,10 +151,9 @@ export function initializeGroupedListings() {
         inputSearch.value = searchKeywords;
     }
 
-    const activeCategoryFilter = url.searchParams.get('category') || 'all';
-    const activeFilterButton = document.querySelector(`[data-filter="${activeCategoryFilter}"]`);
-    const filtered = filterResults(activeCategoryFilter, searchKeywords);
-    activateButton(activeFilterButton, filters);
+    const categoryFromUrl = url.searchParams.get('category') || 'all';
+    const filtered = filterResults(categoryFromUrl, searchKeywords);
+    setActiveCategoryFilterButton(categoryFromUrl);
     showResults(filtered);
 
 

go.mod

@@ -4,7 +4,7 @@ go 1.24.4
 
 require (
 	github.com/DataDog/websites-modules v1.4.253 // indirect
-	github.com/DataDog/websites-sources v0.0.0-20250821174838-1950c6e17096 // indirect
+	github.com/DataDog/websites-sources v0.0.0-20250826202848-b1166170e449 // indirect
 )
 
 // replace github.com/DataDog/websites-modules => /Users/lisiane.turlure/guac/websites-modules

go.sum

@@ -1,4 +1,4 @@
 github.com/DataDog/websites-modules v1.4.253 h1:Sd+5ILFUVOyagh3oUMyc0onM7bykJy0asO9ObLgx4ms=
 github.com/DataDog/websites-modules v1.4.253/go.mod h1:CcQxAmCXoiFr3hNw6Q+1si65C3uOP1gB+7aX4S3h+CQ=
-github.com/DataDog/websites-sources v0.0.0-20250821174838-1950c6e17096 h1:2hC1uZObqOzw6N3kflWxYvysBov71qGB4bj4IhFkDBM=
-github.com/DataDog/websites-sources v0.0.0-20250821174838-1950c6e17096/go.mod h1:DlDYkYoR/nhKYRur0+2jmGGc7ydk8Q0ybWkS6oaLVuo=
+github.com/DataDog/websites-sources v0.0.0-20250826202848-b1166170e449 h1:7/gA9fYaZJT+GE7HnI7u7gKn+arQPKVy5EdGqAFVazs=
+github.com/DataDog/websites-sources v0.0.0-20250826202848-b1166170e449/go.mod h1:DlDYkYoR/nhKYRur0+2jmGGc7ydk8Q0ybWkS6oaLVuo=

layouts/actioncatalog/list.html

@@ -93,7 +93,7 @@ <h1 id="pagetitle">{{ .Title }}</h1>
       {{ $logo_path := partialCached "integrations-logo.html" (dict "context" $dot "basename" $icon_id "variant" "avatar" "fallback" "cloud") $icon_id "avatar" }}
       {{ $default_dd_logo_path := partialCached "integrations-logo.html" (dict "context" $dot "basename" "_datadog" "variant" "avatar" "fallback" "cloud") "_datadog" "avatar" }}
       <div class="js-group js-group-{{ $workflow_title | anchorize }}" id="{{ $workflow_title | anchorize }}">
-        <div class="js-group-header mb-1 d-flex align-items-center active" id="">
+        <div class="js-group-header mb-1 d-flex align-items-center" id="">
           <div class="js-group-header__icon d-inline font-semibold h-100 text-uppercase px-2">
             {{ partial "get-action-catalog-icon" (dict "page_ctx" $dot "icon_name" $icon_name "icon_type" $icon_type "logo_path" $logo_path "workflow_title" $workflow_title "dd_logo_path" $default_dd_logo_path) }}
           </div>

layouts/partials/grouped-item-listings.html

@@ -21,7 +21,7 @@
   <div class="js-empty-results d-none font-semibold"></div>
   {{ range $i, $v := $listGroups }}
   <div class="js-group js-group-{{ $i }}" id="{{ $v.Key | anchorize }}">
-    <div class="js-group-header mb-1 d-flex align-items-center active" id="">
+    <div class="js-group-header mb-1 d-flex align-items-center" id="">
       <div class="js-group-header__icon d-inline font-semibold h-100 text-uppercase px-2">
         {{ range last 1 $v.Pages }}
           {{ $basename := .Params.integration_id | default .Params.icon.integration_id | default .Params.source }}