Prevent recursive select change loops in event filter

contao/templates/frontend/event_filter.html.twig

@@ -1,14 +1,19 @@
 <div id="eventfilters" data-eventlist-id="{{ targetEventListId|default('eventlist')|e('html_attr') }}">
-    <button type="button" data-filter-tag="all" class="active">Alle</button>
-
+    <div class="select-filters">
+        <div class="widget-select category">
+            <label for="tag-filter" class="visually-hidden">Kategorie wählen</label>
+            <select id="tag-filter">
+                <option value="all" data-placeholder="true">Kategorie wählen</option>
                 {% for tag in tagButtons|default([]) %}
-        <button type="button" data-filter-tag="{{ tag.id }}">{{ tag.title }} ({{ tag.count }})</button>
+                    <option value="tag-{{ tag.id }}">{{ tag.title }} ({{ tag.count }})</option>
                 {% endfor %}
+            </select>
+        </div>
 
         <div class="widget-select places">
-        <label for="location-filter">Orte:</label>
+            <label for="location-filter" class="visually-hidden">Ort wählen</label>
             <select id="location-filter">
-            <option value="all">Orte</option>
+                <option value="all" data-placeholder="true">Ort wählen</option>
                 {% for location in locations|default([]) %}
                     <option value="location-{{ location.id }}">{{ location.title }} ({{ location.count }})</option>
                 {% endfor %}
@@ -16,9 +21,9 @@
         </div>
 
         <div class="widget-select org">
-        <label for="org-filter">Veranstalter:</label>
+            <label for="org-filter" class="visually-hidden">Veranstalter wählen</label>
             <select id="org-filter">
-            <option value="all">Veranstalter</option>
+                <option value="all" data-placeholder="true">Veranstalter wählen</option>
                 {% for organization in organizations|default([]) %}
                     <option value="org-{{ organization.id }}">{{ organization.title }} ({{ organization.count }})</option>
                 {% endfor %}
@@ -26,7 +31,22 @@
         </div>
     </div>
 
+    <p id="eventfilter-status" class="visually-hidden" aria-live="polite"></p>
+</div>
+
 <style>
+    .visually-hidden {
+        position: absolute;
+        width: 1px;
+        height: 1px;
+        padding: 0;
+        margin: -1px;
+        overflow: hidden;
+        clip: rect(0, 0, 0, 0);
+        white-space: nowrap;
+        border: 0;
+    }
+
     .event-filter-target-list {
         display: grid;
         grid-template-columns: repeat(auto-fill, minmax(240px, 1fr));
@@ -46,13 +66,19 @@
         pointer-events: none;
     }
 
-    #eventfilters .active,
-    #eventfilters select.active {
+    #eventfilters .widget-select.active .ss-main {
+        outline: 2px solid currentColor;
+        outline-offset: 2px;
+    }
+
+    #eventfilters .ss-main:focus-visible {
         outline: 2px solid currentColor;
         outline-offset: 2px;
     }
 </style>
 
+<script src="https://cdn.jsdelivr.net/npm/slim-select@3/dist/slimselect.min.js"></script>
+
 <script type="module">
     const filters = document.getElementById('eventfilters');
 
@@ -70,13 +96,60 @@
     list?.classList.add('event-filter-target-list');
 
     const events = list ? Array.from(list.querySelectorAll(':scope > .event')) : [];
-    const tagButtons = Array.from(filters.querySelectorAll('button[data-filter-tag]'));
+    const tagSelect = filters.querySelector('#tag-filter');
     const locationSelect = filters.querySelector('#location-filter');
     const orgSelect = filters.querySelector('#org-filter');
+    const tagWidget = tagSelect?.closest('.widget-select');
+    const locationWidget = locationSelect?.closest('.widget-select');
+    const orgWidget = orgSelect?.closest('.widget-select');
+    const status = filters.querySelector('#eventfilter-status');
 
     const animationMs = 220;
     let hideTimers = new WeakMap();
-    let currentFilter = { type: 'tag', value: 'all' };
+    let currentFilter = { type: 'all', value: 'all' };
+    let suppressedChangeEvents = 0;
+
+    const initSlimSelect = (selectElement) => {
+        if (!selectElement || 'undefined' === typeof window.SlimSelect) {
+            return null;
+        }
+
+        return new window.SlimSelect({
+            select: selectElement,
+            settings: {
+                showSearch: false,
+                allowDeselect: false,
+            },
+        });
+    };
+
+    const tagSlim = initSlimSelect(tagSelect);
+    const locationSlim = initSlimSelect(locationSelect);
+    const orgSlim = initSlimSelect(orgSelect);
+
+    const setSelectValue = (selectElement, slimInstance, value) => {
+        if (!selectElement) {
+            return;
+        }
+
+        if (selectElement.value === value) {
+            return;
+        }
+
+        suppressedChangeEvents += 1;
+
+        try {
+            if (slimInstance) {
+                slimInstance.setSelected(value);
+            } else {
+                selectElement.value = value;
+            }
+        } finally {
+            queueMicrotask(() => {
+                suppressedChangeEvents = Math.max(0, suppressedChangeEvents - 1);
+            });
+        }
+    };
 
     const clearHideTimer = (eventItem) => {
         const timer = hideTimers.get(eventItem);
@@ -109,17 +182,13 @@
     };
 
     const setActiveControl = ({ type, value }) => {
-        tagButtons.forEach((button) => {
-            button.classList.toggle('active', type === 'tag' && button.dataset.filterTag === value);
-        });
+        const hasActiveTag = type === 'tag' && value !== 'all';
+        const hasActiveLocation = type === 'location' && value !== 'all';
+        const hasActiveOrg = type === 'org' && value !== 'all';
 
-        if (locationSelect) {
-            locationSelect.classList.toggle('active', type === 'location');
-        }
-
-        if (orgSelect) {
-            orgSelect.classList.toggle('active', type === 'org');
-        }
+        tagWidget?.classList.toggle('active', hasActiveTag);
+        locationWidget?.classList.toggle('active', hasActiveLocation);
+        orgWidget?.classList.toggle('active', hasActiveOrg);
     };
 
     const parseIdList = (rawValue) => (rawValue ?? '')
@@ -144,7 +213,37 @@
             return parseIdList(eventItem.dataset.org).includes(filterState.value);
         }
 
+        if (filterState.type === 'all') {
             return true;
+        }
+
+        return true;
+    };
+
+    const updateStatus = (filterState) => {
+        if (!status) {
+            return;
+        }
+
+        const visibleCount = events.filter((eventItem) => !eventItem.hidden).length;
+        let filterText = 'alle';
+
+        if (filterState.type === 'tag' && tagSelect) {
+            const option = tagSelect.options[tagSelect.selectedIndex];
+            filterText = option ? option.textContent.trim() : 'Kategorie wählen';
+        }
+
+        if (filterState.type === 'location' && locationSelect) {
+            const option = locationSelect.options[locationSelect.selectedIndex];
+            filterText = option ? option.textContent.trim() : 'Ort';
+        }
+
+        if (filterState.type === 'org' && orgSelect) {
+            const option = orgSelect.options[orgSelect.selectedIndex];
+            filterText = option ? option.textContent.trim() : 'Veranstalter';
+        }
+
+        status.textContent = `${visibleCount} Veranstaltungen angezeigt, Filter: ${filterText}.`;
     };
 
     const applyFilter = (filterState) => {
@@ -158,46 +257,57 @@
                 hideEvent(eventItem);
             }
         });
+
+        updateStatus(filterState);
     };
 
-    tagButtons.forEach((button) => {
-        button.addEventListener('click', () => {
-            if (locationSelect) {
-                locationSelect.value = 'all';
+    tagSelect?.addEventListener('change', () => {
+        if (suppressedChangeEvents > 0) {
+            return;
         }
 
-            if (orgSelect) {
-                orgSelect.value = 'all';
-            }
+        const selectedValue = tagSelect.value;
 
-            applyFilter({ type: 'tag', value: button.dataset.filterTag ?? 'all' });
-        });
-    });
-
-    locationSelect?.addEventListener('change', () => {
-        const selectedValue = locationSelect.value;
-
-        if (orgSelect) {
-            orgSelect.value = 'all';
-        }
+        setSelectValue(locationSelect, locationSlim, 'all');
+        setSelectValue(orgSelect, orgSlim, 'all');
 
         applyFilter(
             selectedValue === 'all'
-                ? { type: 'tag', value: 'all' }
+                ? { type: 'all', value: 'all' }
+                : { type: 'tag', value: selectedValue.replace('tag-', '') },
+        );
+    });
+
+    locationSelect?.addEventListener('change', () => {
+        if (suppressedChangeEvents > 0) {
+            return;
+        }
+
+        const selectedValue = locationSelect.value;
+
+        setSelectValue(tagSelect, tagSlim, 'all');
+        setSelectValue(orgSelect, orgSlim, 'all');
+
+        applyFilter(
+            selectedValue === 'all'
+                ? { type: 'all', value: 'all' }
                 : { type: 'location', value: selectedValue.replace('location-', '') },
         );
     });
 
     orgSelect?.addEventListener('change', () => {
+        if (suppressedChangeEvents > 0) {
+            return;
+        }
+
         const selectedValue = orgSelect.value;
 
-        if (locationSelect) {
-            locationSelect.value = 'all';
-        }
+        setSelectValue(tagSelect, tagSlim, 'all');
+        setSelectValue(locationSelect, locationSlim, 'all');
 
         applyFilter(
             selectedValue === 'all'
-                ? { type: 'tag', value: 'all' }
+                ? { type: 'all', value: 'all' }
                 : { type: 'org', value: selectedValue.replace('org-', '') },
         );
     });