Fix Tom Select input wrapping and restore arrow icon

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,6 +82,20 @@
         display: none;
     }
 
+    #eventfilters .ts-wrapper.single .ts-control {
+        background-image: url("data:image/svg+xml;charset=utf-8,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'%3E%3Cpath fill='none' stroke='%23343a40' stroke-linecap='round' stroke-linejoin='round' stroke-width='2' d='m2 5 6 6 6-6'/%3E%3C/svg%3E");
+        background-repeat: no-repeat;
+        background-position: right 0.75rem center;
+        background-size: 16px 12px;
+        padding-right: 2rem;
+    }
+
+    #eventfilters .ts-wrapper.single .ts-control > input {
+        width: auto !important;
+        min-width: 0 !important;
+        flex: 0 0 auto;
+    }
+
 </style>
 
 <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/tom-select@2.4.3/dist/css/tom-select.css">
@@ -115,7 +129,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 +137,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 +205,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);
@@ -204,7 +224,7 @@
         .filter(Boolean);
 
     const matches = (eventItem, filterState) => {
-        if (filterState.value === 'all') {
+        if (!filterState.value || filterState.type === 'all') {
             return true;
         }
 
@@ -220,10 +240,6 @@
             return parseIdList(eventItem.dataset.org).includes(filterState.value);
         }
 
-        if (filterState.type === 'all') {
-            return true;
-        }
-
         return true;
     };
 
@@ -275,12 +291,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-', '') },
         );
     });
@@ -292,12 +308,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-', '') },
         );
     });
@@ -309,22 +325,22 @@
 
         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: '' });
     });
 
     applyFilter(currentFilter);