Use Tom Select defaults for event filter

contao/templates/frontend/event_filter.html.twig

@@ -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,11 @@
     #eventfilters .eventfilter-reset[hidden] {
         display: none;
     }
+
 </style>
 
-<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/slim-select@3/dist/slimselect.css">
+<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/slim-select@3/dist/slimselect.min.js"></script>
+<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');
@@ -117,25 +118,19 @@
     let currentFilter = { type: 'all', value: 'all' };
     let suppressedChangeEvents = 0;
 
-    const initSlimSelect = (selectElement) => {
+    const initTomSelect = (selectElement) => {
-        if (!selectElement || 'undefined' === typeof window.SlimSelect) {
+        if (!selectElement || 'undefined' === typeof window.TomSelect) {
             return null;
         }
 
-        return new window.SlimSelect({
+        return new window.TomSelect(selectElement);
-            select: selectElement,
-            settings: {
-                showSearch: false,
-                allowDeselect: false,
-            },
-        });
     };
 
-    const tagSlim = initSlimSelect(tagSelect);
+    const tagTom = initTomSelect(tagSelect);
-    const locationSlim = initSlimSelect(locationSelect);
+    const locationTom = initTomSelect(locationSelect);
-    const orgSlim = initSlimSelect(orgSelect);
+    const orgTom = initTomSelect(orgSelect);
 
-    const setSelectValue = (selectElement, slimInstance, value) => {
+    const setSelectValue = (selectElement, tomInstance, value) => {
         if (!selectElement) {
             return;
         }
@@ -147,8 +142,8 @@
         suppressedChangeEvents += 1;
 
         try {
-            if (slimInstance) {
+            if (tomInstance) {
-                slimInstance.setSelected(value);
+                tomInstance.setValue(value, true);
             } else {
                 selectElement.value = value;
             }
@@ -280,8 +275,8 @@
 
         const selectedValue = tagSelect.value;
 
-        setSelectValue(locationSelect, locationSlim, 'all');
+        setSelectValue(locationSelect, locationTom, 'all');
-        setSelectValue(orgSelect, orgSlim, 'all');
+        setSelectValue(orgSelect, orgTom, 'all');
 
         applyFilter(
             selectedValue === 'all'
@@ -297,8 +292,8 @@
 
         const selectedValue = locationSelect.value;
 
-        setSelectValue(tagSelect, tagSlim, 'all');
+        setSelectValue(tagSelect, tagTom, 'all');
-        setSelectValue(orgSelect, orgSlim, 'all');
+        setSelectValue(orgSelect, orgTom, 'all');
 
         applyFilter(
             selectedValue === 'all'
@@ -314,8 +309,8 @@
 
         const selectedValue = orgSelect.value;
 
-        setSelectValue(tagSelect, tagSlim, 'all');
+        setSelectValue(tagSelect, tagTom, 'all');
-        setSelectValue(locationSelect, locationSlim, 'all');
+        setSelectValue(locationSelect, locationTom, 'all');
 
         applyFilter(
             selectedValue === 'all'
@@ -325,9 +320,9 @@
     });
 
     resetButton?.addEventListener('click', () => {
-        setSelectValue(tagSelect, tagSlim, 'all');
+        setSelectValue(tagSelect, tagTom, 'all');
-        setSelectValue(locationSelect, locationSlim, 'all');
+        setSelectValue(locationSelect, locationTom, 'all');
-        setSelectValue(orgSelect, orgSlim, 'all');
+        setSelectValue(orgSelect, orgTom, 'all');
 
         applyFilter({ type: 'all', value: 'all' });
     });