Use Tom Select defaults for event filter

contao/templates/frontend/event_filter.html.twig

@@ -82,9 +82,6 @@
         display: none;
     }
 
-    #eventfilters .ts-dropdown-content {
-        overscroll-behavior: contain;
-    }
 </style>
 
 <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/tom-select@2.4.3/dist/css/tom-select.css">
@@ -126,15 +123,7 @@
             return null;
         }
 
-        return new window.TomSelect(selectElement, {
+        return new window.TomSelect(selectElement);
-            create: false,
-            maxItems: 1,
-            closeAfterSelect: true,
-            allowEmptyOption: true,
-            searchField: [],
-            controlInput: null,
-            dropdownParent: selectElement.closest('.widget-select') || undefined,
-        });
     };
 
     const tagTom = initTomSelect(tagSelect);
@@ -338,107 +327,5 @@
         applyFilter({ type: 'all', value: 'all' });
     });
 
-    const getDropdownFromTarget = (target) => {
-        if (!(target instanceof Element)) {
-            return null;
-        }
-
-        return target.closest('.ts-dropdown-content, .ts-dropdown');
-    };
-
-    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 = scrollContainer.scrollTop;
-        const height = scrollContainer.clientHeight;
-        const scrollHeight = scrollContainer.scrollHeight;
-
-        const atTop = top <= 0;
-        const atBottom = top + height >= scrollHeight - 1;
-
-        return (atTop && delta < 0) || (atBottom && delta > 0);
-    };
-
-    let lastTouchY = null;
-
-    document.addEventListener('wheel', (event) => {
-        const dropdown = getDropdownFromTarget(event.target);
-        if (!dropdown) {
-            return;
-        }
-
-        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;
-        }
-
-        lastTouchY = event.touches[0].clientY;
-    }, { passive: true, capture: true });
-
-    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(scrollContainer, delta)) {
-            event.preventDefault();
-        }
-
-        event.stopPropagation();
-
-        lastTouchY = currentTouchY;
-    }, { passive: false, capture: true });
-
-    document.addEventListener('touchend', () => {
-        lastTouchY = null;
-    }, { passive: true, capture: true });
-
-    document.addEventListener('touchcancel', () => {
-        lastTouchY = null;
-    }, { passive: true, capture: true });
-
     applyFilter(currentFilter);
 </script>