@pushwoosh/dumb-components 2.9.15 → 2.9.16

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@pushwoosh/dumb-components",
-  "version": "2.9.15",
+  "version": "2.9.16",
   "description": "React components to build Pushwoosh products",
   "main": "index.js",
   "module": "index.js",

package/shared/dropdownField/SuggestionsDropdown.js

@@ -5,6 +5,7 @@ import { CreateItemLabel, Dropdown, DropdownEmpty, DropdownItem, DropdownLoading
 import { Spinner } from '../../Spinner';
 const LOAD_MORE_THRESHOLD = 24;
 const CREATE_KEY = '__create__';
+const TOUCH_SCROLL_THRESHOLD = 8;
 /**
  * Internal floating option list shared by the Combobox family: renders the rows,
  * empty/loading text, an optional "create" row and load-more support.
@@ -34,10 +35,44 @@ export function SuggestionsDropdown({
   const activeItem = items.find(item => item.active);
   const activeKey = createActive ? CREATE_KEY : activeItem?.key ?? null;
   useEffect(() => {
-    if (activeKey === null) return;
-    activeItemRef.current?.scrollIntoView({
+    if (activeKey === null) return undefined;
+    const scrollToActive = () => activeItemRef.current?.scrollIntoView({
       block: 'nearest'
     });
+    scrollToActive();
+    const list = activeItemRef.current?.parentElement;
+    if (!list || typeof ResizeObserver === 'undefined') return undefined;
+    const observer = new ResizeObserver(scrollToActive);
+    const stopFollowing = () => observer.disconnect();
+    const onScrollbarPointerDown = event => {
+      if (event.target === list) stopFollowing();
+    };
+    let touchStartY = null;
+    const onTouchStart = event => {
+      touchStartY = event.touches[0]?.clientY ?? null;
+    };
+    const onTouchMove = event => {
+      const y = event.touches[0]?.clientY;
+      if (touchStartY !== null && y !== undefined && Math.abs(y - touchStartY) > TOUCH_SCROLL_THRESHOLD) stopFollowing();
+    };
+    observer.observe(list);
+    list.addEventListener('wheel', stopFollowing, {
+      passive: true
+    });
+    list.addEventListener('touchstart', onTouchStart, {
+      passive: true
+    });
+    list.addEventListener('touchmove', onTouchMove, {
+      passive: true
+    });
+    list.addEventListener('pointerdown', onScrollbarPointerDown);
+    return () => {
+      observer.disconnect();
+      list.removeEventListener('wheel', stopFollowing);
+      list.removeEventListener('touchstart', onTouchStart);
+      list.removeEventListener('touchmove', onTouchMove);
+      list.removeEventListener('pointerdown', onScrollbarPointerDown);
+    };
   }, [activeKey]);
   if (typeof document === 'undefined') return null;
   const isEmpty = !loading && items.length === 0 && !createLabel;