Fix SlimSelect dropdown scrolling regression

contao/templates/frontend/event_filter.html.twig

@@ -342,17 +342,40 @@
             return null;
         }
 
-        return target.closest('#eventfilters .ss-content, #eventfilters .ss-list');
+        return target.closest('.ss-content, .ss-list');
     };
 
-    const shouldBlockBoundaryScroll = (dropdown, delta) => {
+    const getScrollContainer = (targetDropdown) => {
-        if (!dropdown || dropdown.scrollHeight <= dropdown.clientHeight) {
+        if (!targetDropdown) {
+            return null;
+        }
+
+        if (targetDropdown.scrollHeight > targetDropdown.clientHeight) {
+            return targetDropdown;
+        }
+
+        const contentContainer = targetDropdown.closest('.ss-content') || targetDropdown;
+        const listContainer = contentContainer.querySelector('.ss-list');
+
+        if (listContainer && listContainer.scrollHeight > listContainer.clientHeight) {
+            return listContainer;
+        }
+
+        if (contentContainer.scrollHeight > contentContainer.clientHeight) {
+            return contentContainer;
+        }
+
+        return null;
+    };
+
+    const shouldBlockBoundaryScroll = (scrollContainer, delta) => {
+        if (!scrollContainer || delta === 0) {
             return false;
         }
 
-        const top = dropdown.scrollTop;
+        const top = scrollContainer.scrollTop;
-        const height = dropdown.clientHeight;
+        const height = scrollContainer.clientHeight;
-        const scrollHeight = dropdown.scrollHeight;
+        const scrollHeight = scrollContainer.scrollHeight;
 
         const atTop = top <= 0;
         const atBottom = top + height >= scrollHeight - 1;
@@ -364,15 +387,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 +412,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 });