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 %}
@@ -68,12 +68,12 @@
         pointer-events: none;
     }
 
-    #eventfilters .widget-select.active .ss-main {
+    #eventfilters .widget-select.active .ts-control {
         outline: 2px solid currentColor;
         outline-offset: 2px;
     }
 
-    #eventfilters .ss-main:focus-visible {
+    #eventfilters .ts-control:focus-within {
         outline: 2px solid currentColor;
         outline-offset: 2px;
     }
@@ -81,10 +81,35 @@
     #eventfilters .eventfilter-reset[hidden] {
         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/slim-select@3/dist/slimselect.css">
-<script src="https://cdn.jsdelivr.net/npm/slim-select@3/dist/slimselect.min.js"></script>
+<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/tom-select@2.4.3/dist/css/tom-select.css">
+<script src="https://cdn.jsdelivr.net/npm/tom-select@2.4.3/dist/js/tom-select.complete.min.js"></script>
 
 <script type="module">
     const filters = document.getElementById('eventfilters');
@@ -114,28 +139,39 @@
 
     const animationMs = 220;
     let hideTimers = new WeakMap();
-    let currentFilter = { type: 'all', value: 'all' };
+    let currentFilter = { type: 'all', value: '' };
     let suppressedChangeEvents = 0;
 
-    const initSlimSelect = (selectElement) => {
-        if (!selectElement || 'undefined' === typeof window.SlimSelect) {
+    const initTomSelect = (selectElement) => {
+        if (!selectElement || 'undefined' === typeof window.TomSelect) {
             return null;
         }
 
-        return new window.SlimSelect({
-            select: selectElement,
-            settings: {
-                showSearch: false,
-                allowDeselect: false,
+        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 tagSlim = initSlimSelect(tagSelect);
-    const locationSlim = initSlimSelect(locationSelect);
-    const orgSlim = initSlimSelect(orgSelect);
+    const tagTom = initTomSelect(tagSelect);
+    const locationTom = initTomSelect(locationSelect);
+    const orgTom = initTomSelect(orgSelect);
 
-    const setSelectValue = (selectElement, slimInstance, value) => {
+    const setSelectValue = (selectElement, tomInstance, value) => {
         if (!selectElement) {
             return;
         }
@@ -147,8 +183,8 @@
         suppressedChangeEvents += 1;
 
         try {
-            if (slimInstance) {
-                slimInstance.setSelected(value);
+            if (tomInstance) {
+                tomInstance.setValue(value, true);
             } else {
                 selectElement.value = value;
             }
@@ -190,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);
@@ -209,7 +245,7 @@
         .filter(Boolean);
 
     const matches = (eventItem, filterState) => {
-        if (filterState.value === 'all') {
+        if (!filterState.value || filterState.type === 'all') {
             return true;
         }
 
@@ -225,10 +261,6 @@
             return parseIdList(eventItem.dataset.org).includes(filterState.value);
         }
 
-        if (filterState.type === 'all') {
-            return true;
-        }
-
         return true;
     };
 
@@ -280,12 +312,12 @@
 
         const selectedValue = tagSelect.value;
 
-        setSelectValue(locationSelect, locationSlim, 'all');
-        setSelectValue(orgSelect, orgSlim, 'all');
+        setSelectValue(locationSelect, locationTom, '');
+        setSelectValue(orgSelect, orgTom, '');
 
         applyFilter(
-            selectedValue === 'all'
-                ? { type: 'all', value: 'all' }
+            !selectedValue
+                ? { type: 'all', value: '' }
                 : { type: 'tag', value: selectedValue.replace('tag-', '') },
         );
     });
@@ -297,12 +329,12 @@
 
         const selectedValue = locationSelect.value;
 
-        setSelectValue(tagSelect, tagSlim, 'all');
-        setSelectValue(orgSelect, orgSlim, 'all');
+        setSelectValue(tagSelect, tagTom, '');
+        setSelectValue(orgSelect, orgTom, '');
 
         applyFilter(
-            selectedValue === 'all'
-                ? { type: 'all', value: 'all' }
+            !selectedValue
+                ? { type: 'all', value: '' }
                 : { type: 'location', value: selectedValue.replace('location-', '') },
         );
     });
@@ -314,22 +346,22 @@
 
         const selectedValue = orgSelect.value;
 
-        setSelectValue(tagSelect, tagSlim, 'all');
-        setSelectValue(locationSelect, locationSlim, '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, tagSlim, 'all');
-        setSelectValue(locationSelect, locationSlim, 'all');
-        setSelectValue(orgSelect, orgSlim, 'all');
+        setSelectValue(tagSelect, tagTom, '');
+        setSelectValue(locationSelect, locationTom, '');
+        setSelectValue(orgSelect, orgTom, '');
 
-        applyFilter({ type: 'all', value: 'all' });
+        applyFilter({ type: 'all', value: '' });
     });
 
     applyFilter(currentFilter);