Add Tom Select arrow and disable input autocomplete

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 %}
@@ -82,6 +82,30 @@
         display: none;
     }
 
+    #eventfilters .ts-wrapper.single .ts-control {
+        position: relative;
+        padding-right: 2rem;
+    }
+
+    #eventfilters .ts-wrapper.single .ts-control::after {
+        content: '';
+        position: absolute;
+        right: 0.75rem;
+        top: 50%;
+        width: 0;
+        height: 0;
+        border-left: 0.3rem solid transparent;
+        border-right: 0.3rem solid transparent;
+        border-top: 0.4rem solid currentColor;
+        transform: translateY(-30%);
+        pointer-events: none;
+        opacity: 0.7;
+    }
+
+    #eventfilters .ts-wrapper.single.dropdown-active .ts-control::after {
+        transform: translateY(-65%) rotate(180deg);
+    }
+
 </style>
 
 <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/tom-select@2.4.3/dist/css/tom-select.css">
@@ -115,7 +139,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 +147,24 @@
             return null;
         }
 
-        return new window.TomSelect(selectElement);
+        return new window.TomSelect(selectElement, {
+            create: true,
+            sortField: {
+                field: 'text',
+                direction: 'asc',
+            },
+            onInitialize() {
+                if (!this.control_input) {
+                    return;
+                }
+
+                this.control_input.setAttribute('autocomplete', 'off');
+                this.control_input.setAttribute('autocorrect', 'off');
+                this.control_input.setAttribute('autocapitalize', 'off');
+                this.control_input.setAttribute('spellcheck', 'false');
+                this.control_input.setAttribute('name', `${selectElement.id}-ts-input`);
+            },
+        });
     };
 
     const tagTom = initTomSelect(tagSelect);
@@ -185,9 +226,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 +245,7 @@
         .filter(Boolean);
 
     const matches = (eventItem, filterState) => {
-        if (filterState.value === 'all') {
+        if (!filterState.value || filterState.type === 'all') {
             return true;
         }
 
@@ -220,10 +261,6 @@
             return parseIdList(eventItem.dataset.org).includes(filterState.value);
         }
 
-        if (filterState.type === 'all') {
-            return true;
-        }
-
         return true;
     };
 
@@ -275,12 +312,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 +329,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 +346,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);