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,17 +343,37 @@
             return null;
         }
 
-        return target.closest('#eventfilters .ss-content, #eventfilters .ss-list');
+        return target.closest('.ts-dropdown-content, .ts-dropdown');
     };
 
-    const shouldBlockBoundaryScroll = (dropdown, delta) => {
-        if (!dropdown || dropdown.scrollHeight <= dropdown.clientHeight) {
+    const getScrollContainer = (targetDropdown) => {
+        if (!targetDropdown) {
+            return null;
+        }
+
+        if (targetDropdown.scrollHeight > targetDropdown.clientHeight) {
+            return targetDropdown;
+        }
+
+        const dropdownContent = targetDropdown.classList.contains('ts-dropdown-content')
+            ? targetDropdown
+            : targetDropdown.querySelector('.ts-dropdown-content');
+
+        if (dropdownContent && dropdownContent.scrollHeight > dropdownContent.clientHeight) {
+            return dropdownContent;
+        }
+
+        return null;
+    };
+
+    const shouldBlockBoundaryScroll = (scrollContainer, delta) => {
+        if (!scrollContainer || delta === 0) {
             return false;
         }
 
-        const top = dropdown.scrollTop;
-        const height = dropdown.clientHeight;
-        const scrollHeight = dropdown.scrollHeight;
+        const top = scrollContainer.scrollTop;
+        const height = scrollContainer.clientHeight;
+        const scrollHeight = scrollContainer.scrollHeight;
 
         const atTop = top <= 0;
         const atBottom = top + height >= scrollHeight - 1;
@@ -364,15 +385,21 @@
 
     document.addEventListener('wheel', (event) => {
         const dropdown = getDropdownFromTarget(event.target);
+        if (!dropdown) {
+            return;
+        }
 
-        if (shouldBlockBoundaryScroll(dropdown, event.deltaY)) {
+        const scrollContainer = getScrollContainer(dropdown);
+
+        if (shouldBlockBoundaryScroll(scrollContainer, event.deltaY)) {
             event.preventDefault();
         }
+
+        event.stopPropagation();
     }, { passive: false, capture: true });
 
     document.addEventListener('touchstart', (event) => {
         const dropdown = getDropdownFromTarget(event.target);
-
         if (!dropdown || event.touches.length === 0) {
             lastTouchY = null;
             return;
@@ -383,18 +410,25 @@
 
     document.addEventListener('touchmove', (event) => {
         const dropdown = getDropdownFromTarget(event.target);
-
         if (!dropdown || event.touches.length === 0 || lastTouchY === null) {
             return;
         }
 
+        const scrollContainer = getScrollContainer(dropdown);
+
+        if (!scrollContainer) {
+            return;
+        }
+
         const currentTouchY = event.touches[0].clientY;
         const delta = lastTouchY - currentTouchY;
 
-        if (shouldBlockBoundaryScroll(dropdown, delta)) {
+        if (shouldBlockBoundaryScroll(scrollContainer, delta)) {
             event.preventDefault();
         }
 
+        event.stopPropagation();
+
         lastTouchY = currentTouchY;
     }, { passive: false, capture: true });