Configure Tom Select placeholders and sortable options

contao/templates/frontend/event_filter.html.twig

@@ -2,8 +2,8 @@
     <div class="select-filters">
         <div class="widget-select category">
             <label for="tag-filter" class="visually-hidden">Kategorie wählen</label>
-            <select id="tag-filter">
+            <select id="tag-filter" placeholder="Kategorie wählen" autocomplete="off">
-                <option value="all" data-placeholder="true">Kategorie wählen</option>
+                <option value="">Kategorie wählen</option>
                 {% for tag in tagButtons|default([]) %}
                     <option value="tag-{{ tag.id }}">{{ tag.title }} ({{ tag.count }})</option>
                 {% endfor %}
@@ -12,8 +12,8 @@
 
         <div class="widget-select places">
             <label for="location-filter" class="visually-hidden">Ort wählen</label>
-            <select id="location-filter">
+            <select id="location-filter" placeholder="Ort wählen" autocomplete="off">
-                <option value="all" data-placeholder="true">Ort wählen</option>
+                <option value="">Ort wählen</option>
                 {% for location in locations|default([]) %}
                     <option value="location-{{ location.id }}">{{ location.title }} ({{ location.count }})</option>
                 {% endfor %}
@@ -22,8 +22,8 @@
 
         <div class="widget-select org">
             <label for="org-filter" class="visually-hidden">Veranstalter wählen</label>
-            <select id="org-filter">
+            <select id="org-filter" placeholder="Veranstalter wählen" autocomplete="off">
-                <option value="all" data-placeholder="true">Veranstalter wählen</option>
+                <option value="">Veranstalter wählen</option>
                 {% for organization in organizations|default([]) %}
                     <option value="org-{{ organization.id }}">{{ organization.title }} ({{ organization.count }})</option>
                 {% endfor %}
@@ -82,9 +82,6 @@
         display: none;
     }
 
-    #eventfilters .ts-dropdown-content {
-        overscroll-behavior: contain;
-    }
 </style>
 
 <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/tom-select@2.4.3/dist/css/tom-select.css">
@@ -118,7 +115,7 @@
 
     const animationMs = 220;
     let hideTimers = new WeakMap();
-    let currentFilter = { type: 'all', value: 'all' };
+    let currentFilter = { type: 'all', value: '' };
     let suppressedChangeEvents = 0;
 
     const initTomSelect = (selectElement) => {
@@ -127,13 +124,11 @@
         }
 
         return new window.TomSelect(selectElement, {
-            create: false,
+            create: true,
-            maxItems: 1,
+            sortField: {
-            closeAfterSelect: true,
+                field: 'text',
-            allowEmptyOption: true,
+                direction: 'asc',
-            searchField: [],
+            },
-            controlInput: null,
-            dropdownParent: selectElement.closest('.widget-select') || undefined,
         });
     };
 
@@ -196,9 +191,9 @@
     };
 
     const setActiveControl = ({ type, value }) => {
-        const hasActiveTag = type === 'tag' && value !== 'all';
+        const hasActiveTag = type === 'tag' && Boolean(value);
-        const hasActiveLocation = type === 'location' && value !== 'all';
+        const hasActiveLocation = type === 'location' && Boolean(value);
-        const hasActiveOrg = type === 'org' && value !== 'all';
+        const hasActiveOrg = type === 'org' && Boolean(value);
 
         tagWidget?.classList.toggle('active', hasActiveTag);
         locationWidget?.classList.toggle('active', hasActiveLocation);
@@ -215,7 +210,7 @@
         .filter(Boolean);
 
     const matches = (eventItem, filterState) => {
-        if (filterState.value === 'all') {
+        if (!filterState.value || filterState.type === 'all') {
             return true;
         }
 
@@ -231,10 +226,6 @@
             return parseIdList(eventItem.dataset.org).includes(filterState.value);
         }
 
-        if (filterState.type === 'all') {
-            return true;
-        }
-
         return true;
     };
 
@@ -286,12 +277,12 @@
 
         const selectedValue = tagSelect.value;
 
-        setSelectValue(locationSelect, locationTom, 'all');
+        setSelectValue(locationSelect, locationTom, '');
-        setSelectValue(orgSelect, orgTom, 'all');
+        setSelectValue(orgSelect, orgTom, '');
 
         applyFilter(
-            selectedValue === 'all'
+            !selectedValue
-                ? { type: 'all', value: 'all' }
+                ? { type: 'all', value: '' }
                 : { type: 'tag', value: selectedValue.replace('tag-', '') },
         );
     });
@@ -303,12 +294,12 @@
 
         const selectedValue = locationSelect.value;
 
-        setSelectValue(tagSelect, tagTom, 'all');
+        setSelectValue(tagSelect, tagTom, '');
-        setSelectValue(orgSelect, orgTom, 'all');
+        setSelectValue(orgSelect, orgTom, '');
 
         applyFilter(
-            selectedValue === 'all'
+            !selectedValue
-                ? { type: 'all', value: 'all' }
+                ? { type: 'all', value: '' }
                 : { type: 'location', value: selectedValue.replace('location-', '') },
         );
     });
@@ -320,125 +311,23 @@
 
         const selectedValue = orgSelect.value;
 
-        setSelectValue(tagSelect, tagTom, 'all');
+        setSelectValue(tagSelect, tagTom, '');
-        setSelectValue(locationSelect, locationTom, 'all');
+        setSelectValue(locationSelect, locationTom, '');
 
         applyFilter(
-            selectedValue === 'all'
+            !selectedValue
-                ? { type: 'all', value: 'all' }
+                ? { type: 'all', value: '' }
                 : { type: 'org', value: selectedValue.replace('org-', '') },
         );
     });
 
     resetButton?.addEventListener('click', () => {
-        setSelectValue(tagSelect, tagTom, 'all');
+        setSelectValue(tagSelect, tagTom, '');
-        setSelectValue(locationSelect, locationTom, 'all');
+        setSelectValue(locationSelect, locationTom, '');
-        setSelectValue(orgSelect, orgTom, 'all');
+        setSelectValue(orgSelect, orgTom, '');
 
-        applyFilter({ type: 'all', value: 'all' });
+        applyFilter({ type: 'all', value: '' });
     });
 
-    const getDropdownFromTarget = (target) => {
-        if (!(target instanceof Element)) {
-            return null;
-        }
-
-        return target.closest('.ts-dropdown-content, .ts-dropdown');
-    };
-
-    const getScrollContainer = (targetDropdown) => {
-        if (!targetDropdown) {
-            return null;
-        }
-
-        if (targetDropdown.scrollHeight > targetDropdown.clientHeight) {
-            return targetDropdown;
-        }
-
-        const dropdownContent = targetDropdown.classList.contains('ts-dropdown-content')
-            ? targetDropdown
-            : targetDropdown.querySelector('.ts-dropdown-content');
-
-        if (dropdownContent && dropdownContent.scrollHeight > dropdownContent.clientHeight) {
-            return dropdownContent;
-        }
-
-        return null;
-    };
-
-    const shouldBlockBoundaryScroll = (scrollContainer, delta) => {
-        if (!scrollContainer || delta === 0) {
-            return false;
-        }
-
-        const top = scrollContainer.scrollTop;
-        const height = scrollContainer.clientHeight;
-        const scrollHeight = scrollContainer.scrollHeight;
-
-        const atTop = top <= 0;
-        const atBottom = top + height >= scrollHeight - 1;
-
-        return (atTop && delta < 0) || (atBottom && delta > 0);
-    };
-
-    let lastTouchY = null;
-
-    document.addEventListener('wheel', (event) => {
-        const dropdown = getDropdownFromTarget(event.target);
-        if (!dropdown) {
-            return;
-        }
-
-        const scrollContainer = getScrollContainer(dropdown);
-
-        if (shouldBlockBoundaryScroll(scrollContainer, event.deltaY)) {
-            event.preventDefault();
-        }
-
-        event.stopPropagation();
-    }, { passive: false, capture: true });
-
-    document.addEventListener('touchstart', (event) => {
-        const dropdown = getDropdownFromTarget(event.target);
-        if (!dropdown || event.touches.length === 0) {
-            lastTouchY = null;
-            return;
-        }
-
-        lastTouchY = event.touches[0].clientY;
-    }, { passive: true, capture: true });
-
-    document.addEventListener('touchmove', (event) => {
-        const dropdown = getDropdownFromTarget(event.target);
-        if (!dropdown || event.touches.length === 0 || lastTouchY === null) {
-            return;
-        }
-
-        const scrollContainer = getScrollContainer(dropdown);
-
-        if (!scrollContainer) {
-            return;
-        }
-
-        const currentTouchY = event.touches[0].clientY;
-        const delta = lastTouchY - currentTouchY;
-
-        if (shouldBlockBoundaryScroll(scrollContainer, delta)) {
-            event.preventDefault();
-        }
-
-        event.stopPropagation();
-
-        lastTouchY = currentTouchY;
-    }, { passive: false, capture: true });
-
-    document.addEventListener('touchend', () => {
-        lastTouchY = null;
-    }, { passive: true, capture: true });
-
-    document.addEventListener('touchcancel', () => {
-        lastTouchY = null;
-    }, { passive: true, capture: true });
-
     applyFilter(currentFilter);
 </script>