Set active state on selected filter widgets

contao/templates/frontend/event_filter.html.twig

@@ -7,24 +7,26 @@
         {% endfor %}
     </div>
 
-    <div class="widget-select places">
+    <div class="select-filters">
-        <label for="location-filter" class="visually-hidden">Orte:</label>
+        <div class="widget-select places">
-        <select id="location-filter">
+            <label for="location-filter" class="visually-hidden">Orte:</label>
-            <option value="all">Orte</option>
+            <select id="location-filter">
-            {% for location in locations|default([]) %}
+                <option value="all">Orte</option>
-                <option value="location-{{ location.id }}">{{ location.title }} ({{ location.count }})</option>
+                {% for location in locations|default([]) %}
-            {% endfor %}
+                    <option value="location-{{ location.id }}">{{ location.title }} ({{ location.count }})</option>
-        </select>
+                {% endfor %}
-    </div>
+            </select>
+        </div>
 
-    <div class="widget-select org">
+        <div class="widget-select org">
-        <label for="org-filter" class="visually-hidden">Veranstalter:</label>
+            <label for="org-filter" class="visually-hidden">Veranstalter:</label>
-        <select id="org-filter">
+            <select id="org-filter">
-            <option value="all">Veranstalter</option>
+                <option value="all">Veranstalter</option>
-            {% for organization in organizations|default([]) %}
+                {% for organization in organizations|default([]) %}
-                <option value="org-{{ organization.id }}">{{ organization.title }} ({{ organization.count }})</option>
+                    <option value="org-{{ organization.id }}">{{ organization.title }} ({{ organization.count }})</option>
-            {% endfor %}
+                {% endfor %}
-        </select>
+            </select>
+        </div>
     </div>
 
     <p id="eventfilter-status" class="visually-hidden" aria-live="polite"></p>
@@ -95,6 +97,8 @@
     const tagButtons = Array.from(filters.querySelectorAll('button[data-filter-tag]'));
     const locationSelect = filters.querySelector('#location-filter');
     const orgSelect = filters.querySelector('#org-filter');
+    const locationWidget = locationSelect?.closest('.widget-select');
+    const orgWidget = orgSelect?.closest('.widget-select');
     const status = filters.querySelector('#eventfilter-status');
 
     const animationMs = 220;
@@ -140,10 +144,12 @@
 
         if (locationSelect) {
             locationSelect.classList.toggle('active', type === 'location');
+            locationWidget?.classList.toggle('active', type === 'location');
         }
 
         if (orgSelect) {
             orgSelect.classList.toggle('active', type === 'org');
+            orgWidget?.classList.toggle('active', type === 'org');
         }
     };