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">
-                <option value="all" data-placeholder="true">Kategorie wählen</option>
+            <select id="tag-filter" placeholder="Kategorie wählen" autocomplete="off">
+                <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">
-                <option value="all" data-placeholder="true">Ort wählen</option>
+            <select id="location-filter" placeholder="Ort wählen" autocomplete="off">
+                <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">
-                <option value="all" data-placeholder="true">Veranstalter wählen</option>
+            <select id="org-filter" placeholder="Veranstalter wählen" autocomplete="off">
+                <option value="">Veranstalter wählen</option>
                 {% for organization in organizations|default([]) %}
                     <option value="org-{{ organization.id }}">{{ organization.title }} ({{ organization.count }})</option>
                 {% endfor %}
@@ -115,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) => {
@@ -123,7 +123,13 @@
             return null;
         }
 
-        return new window.TomSelect(selectElement);
+        return new window.TomSelect(selectElement, {
+            create: true,
+            sortField: {
+                field: 'text',
+                direction: 'asc',
+            },
+        });
     };
 
     const tagTom = initTomSelect(tagSelect);
@@ -185,9 +191,9 @@
     };
 
     const setActiveControl = ({ type, value }) => {
-        const hasActiveTag = type === 'tag' && value !== 'all';
-        const hasActiveLocation = type === 'location' && value !== 'all';
-        const hasActiveOrg = type === 'org' && value !== 'all';
+        const hasActiveTag = type === 'tag' && Boolean(value);
+        const hasActiveLocation = type === 'location' && Boolean(value);
+        const hasActiveOrg = type === 'org' && Boolean(value);
 
         tagWidget?.classList.toggle('active', hasActiveTag);
         locationWidget?.classList.toggle('active', hasActiveLocation);
@@ -204,7 +210,7 @@
         .filter(Boolean);
 
     const matches = (eventItem, filterState) => {
-        if (filterState.value === 'all') {
+        if (!filterState.value || filterState.type === 'all') {
             return true;
         }
 
@@ -220,10 +226,6 @@
             return parseIdList(eventItem.dataset.org).includes(filterState.value);
         }
 
-        if (filterState.type === 'all') {
-            return true;
-        }
-
         return true;
     };
 
@@ -275,12 +277,12 @@
 
         const selectedValue = tagSelect.value;
 
-        setSelectValue(locationSelect, locationTom, 'all');
-        setSelectValue(orgSelect, orgTom, 'all');
+        setSelectValue(locationSelect, locationTom, '');
+        setSelectValue(orgSelect, orgTom, '');
 
         applyFilter(
-            selectedValue === 'all'
-                ? { type: 'all', value: 'all' }
+            !selectedValue
+                ? { type: 'all', value: '' }
                 : { type: 'tag', value: selectedValue.replace('tag-', '') },
         );
     });
@@ -292,12 +294,12 @@
 
         const selectedValue = locationSelect.value;
 
-        setSelectValue(tagSelect, tagTom, 'all');
-        setSelectValue(orgSelect, orgTom, 'all');
+        setSelectValue(tagSelect, tagTom, '');
+        setSelectValue(orgSelect, orgTom, '');
 
         applyFilter(
-            selectedValue === 'all'
-                ? { type: 'all', value: 'all' }
+            !selectedValue
+                ? { type: 'all', value: '' }
                 : { type: 'location', value: selectedValue.replace('location-', '') },
         );
     });
@@ -309,22 +311,22 @@
 
         const selectedValue = orgSelect.value;
 
-        setSelectValue(tagSelect, tagTom, 'all');
-        setSelectValue(locationSelect, locationTom, 'all');
+        setSelectValue(tagSelect, tagTom, '');
+        setSelectValue(locationSelect, locationTom, '');
 
         applyFilter(
-            selectedValue === 'all'
-                ? { type: 'all', value: 'all' }
+            !selectedValue
+                ? { type: 'all', value: '' }
                 : { type: 'org', value: selectedValue.replace('org-', '') },
         );
     });
 
     resetButton?.addEventListener('click', () => {
-        setSelectValue(tagSelect, tagTom, 'all');
-        setSelectValue(locationSelect, locationTom, 'all');
-        setSelectValue(orgSelect, orgTom, 'all');
+        setSelectValue(tagSelect, tagTom, '');
+        setSelectValue(locationSelect, locationTom, '');
+        setSelectValue(orgSelect, orgTom, '');
 
-        applyFilter({ type: 'all', value: 'all' });
+        applyFilter({ type: 'all', value: '' });
     });
 
     applyFilter(currentFilter);