Set active state on selected filter widgets

contao/templates/frontend/event_filter.html.twig

@@ -1,10 +1,13 @@
 <div id="eventfilters" data-eventlist-id="{{ targetEventListId|default('eventlist')|e('html_attr') }}">
+    <div class="tag-buttons">
         <button type="button" data-filter-tag="all" class="active" aria-pressed="true">Alle</button>
 
         {% for tag in tagButtons|default([]) %}
             <button type="button" data-filter-tag="{{ tag.id }}" aria-pressed="false">{{ tag.title }} ({{ tag.count }})</button>
         {% endfor %}
+    </div>
 
+    <div class="select-filters">
         <div class="widget-select places">
             <label for="location-filter" class="visually-hidden">Orte:</label>
             <select id="location-filter">
@@ -24,6 +27,7 @@
                 {% endfor %}
             </select>
         </div>
+    </div>
 
     <p id="eventfilter-status" class="visually-hidden" aria-live="polite"></p>
 </div>
@@ -93,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;
@@ -138,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');
         }
     };