Replace SlimSelect with Tom Select in 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;
     }
@@ -82,14 +82,13 @@
         display: none;
     }
 
-    #eventfilters .ss-content,
-    #eventfilters .ss-list {
+    #eventfilters .ts-dropdown-content {
         overscroll-behavior: contain;
     }
 </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');
@@ -122,25 +121,27 @@
     let currentFilter = { type: 'all', value: 'all' };
     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: false,
+            maxItems: 1,
+            closeAfterSelect: true,
+            allowEmptyOption: true,
+            searchField: [],
+            controlInput: null,
+            dropdownParent: selectElement.closest('.widget-select') || undefined,
         });
     };
 
-    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;
         }
@@ -152,8 +153,8 @@
         suppressedChangeEvents += 1;
 
         try {
-            if (slimInstance) {
-                slimInstance.setSelected(value);
+            if (tomInstance) {
+                tomInstance.setValue(value, true);
             } else {
                 selectElement.value = value;
             }
@@ -285,8 +286,8 @@
 
         const selectedValue = tagSelect.value;
 
-        setSelectValue(locationSelect, locationSlim, 'all');
-        setSelectValue(orgSelect, orgSlim, 'all');
+        setSelectValue(locationSelect, locationTom, 'all');
+        setSelectValue(orgSelect, orgTom, 'all');
 
         applyFilter(
             selectedValue === 'all'
@@ -302,8 +303,8 @@
 
         const selectedValue = locationSelect.value;
 
-        setSelectValue(tagSelect, tagSlim, 'all');
-        setSelectValue(orgSelect, orgSlim, 'all');
+        setSelectValue(tagSelect, tagTom, 'all');
+        setSelectValue(orgSelect, orgTom, 'all');
 
         applyFilter(
             selectedValue === 'all'
@@ -319,8 +320,8 @@
 
         const selectedValue = orgSelect.value;
 
-        setSelectValue(tagSelect, tagSlim, 'all');
-        setSelectValue(locationSelect, locationSlim, 'all');
+        setSelectValue(tagSelect, tagTom, 'all');
+        setSelectValue(locationSelect, locationTom, 'all');
 
         applyFilter(
             selectedValue === 'all'
@@ -330,9 +331,9 @@
     });
 
     resetButton?.addEventListener('click', () => {
-        setSelectValue(tagSelect, tagSlim, 'all');
-        setSelectValue(locationSelect, locationSlim, 'all');
-        setSelectValue(orgSelect, orgSlim, 'all');
+        setSelectValue(tagSelect, tagTom, 'all');
+        setSelectValue(locationSelect, locationTom, 'all');
+        setSelectValue(orgSelect, orgTom, 'all');
 
         applyFilter({ type: 'all', value: 'all' });
     });
@@ -342,7 +343,7 @@
             return null;
         }
 
-        return target.closest('.ss-content, .ss-list');
+        return target.closest('.ts-dropdown-content, .ts-dropdown');
     };
 
     const getScrollContainer = (targetDropdown) => {
@@ -354,15 +355,12 @@
             return targetDropdown;
         }
 
-        const contentContainer = targetDropdown.closest('.ss-content') || targetDropdown;
-        const listContainer = contentContainer.querySelector('.ss-list');
+        const dropdownContent = targetDropdown.classList.contains('ts-dropdown-content')
+            ? targetDropdown
+            : targetDropdown.querySelector('.ts-dropdown-content');
 
-        if (listContainer && listContainer.scrollHeight > listContainer.clientHeight) {
-            return listContainer;
-        }
-
-        if (contentContainer.scrollHeight > contentContainer.clientHeight) {
-            return contentContainer;
+        if (dropdownContent && dropdownContent.scrollHeight > dropdownContent.clientHeight) {
+            return dropdownContent;
         }
 
         return null;