@pushwoosh/dumb-components 2.9.15 → 2.9.17

package/Combobox/Combobox.js

@@ -1,5 +1,5 @@
 import { jsx as _jsx } from "react/jsx-runtime";
-import { useCallback, useId, useMemo, useRef, useState } from 'react';
+import { useCallback, useEffect, useId, useMemo, useRef, useState } from 'react';
 import { DEFAULT_DEBOUNCE_MS, FieldInput, FieldShell, defaultGetKey, resolveDropdownText, useActiveIndex, useDropdownItems, useFieldOpenEffects, useListNavigation, useShellMouseDown, useToggleOpen } from '../shared/dropdownField';
 function FreeCombobox({
   items,
@@ -101,6 +101,7 @@ function FreeCombobox({
     onChange(event.target.value, {
       source: 'input'
     });
+    setActiveIndex(-1);
     if (!isOpen) open();
   };
   return _jsx(FieldShell, {
@@ -120,6 +121,7 @@ function FreeCombobox({
       onChange('', {
         source: 'input'
       });
+      setActiveIndex(-1);
       inputRef.current?.focus();
     },
     dropdownItems: dropdownItems,
@@ -198,13 +200,28 @@ function SelectCombobox({
   const valueLabel = hasValue ? getLabel(value) : '';
   const selectedKey = hasValue ? getKey(value) : null;
   const inputValue = isOpen ? query : valueLabel;
+  const userMovedRef = useRef(false);
   const open = useCallback(() => {
     if (isOpen) return;
     setIsOpen(true);
     setQuery('');
+    userMovedRef.current = false;
     const idx = sourceItems.findIndex(it => getKey(it) === selectedKey);
     setActiveIndex(idx >= 0 ? idx : 0);
   }, [isOpen, sourceItems, getKey, selectedKey, setActiveIndex]);
+  useEffect(() => {
+    if (!isOpen || query || userMovedRef.current) return;
+    const idx = sourceItems.findIndex(it => getKey(it) === selectedKey);
+    if (idx >= 0) setActiveIndex(idx);
+  }, [isOpen, query, sourceItems, getKey, selectedKey, setActiveIndex]);
+  const moveActive = useCallback(next => {
+    userMovedRef.current = true;
+    setActiveIndex(next);
+  }, [setActiveIndex]);
+  const search = event => {
+    setQuery(event.target.value);
+    moveActive(0);
+  };
   const close = useCallback(() => {
     setIsOpen(false);
     setQuery('');
@@ -221,7 +238,7 @@ function SelectCombobox({
     open,
     itemCount: filteredItems.length,
     activeIndex,
-    setActiveIndex,
+    setActiveIndex: moveActive,
     onSelectIndex: index => commit(filteredItems[index]),
     onEscape: close,
     onReachEnd: loadMore
@@ -282,7 +299,7 @@ function SelectCombobox({
       ref: inputRef,
       autosize: autosize,
       value: inputValue,
-      onChange: event => setQuery(event.target.value),
+      onChange: search,
       onKeyDown: onInputKeyDown,
       onFocus: open,
       placeholder: placeholder,

package/ComboboxMulti/ComboboxMulti.js

@@ -92,7 +92,8 @@ export function ComboboxMulti({
   const close = useCallback(() => {
     setIsOpen(false);
     setQuery('');
-  }, []);
+    setActiveIndex(0);
+  }, [setActiveIndex]);
   const toggle = useCallback(item => {
     const key = getKey(item);
     if (selectedKeys.has(key)) {
@@ -202,7 +203,10 @@ export function ComboboxMulti({
       ref: inputRef,
       autosize: autosize,
       value: query,
-      onChange: e => setQuery(e.target.value),
+      onChange: e => {
+        setQuery(e.target.value);
+        setActiveIndex(0);
+      },
       onKeyDown: onInputKeyDown,
       onFocus: open,
       placeholder: hasTags ? undefined : placeholder,

package/package.json

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

package/shared/dropdownField/FieldInput.js

@@ -20,6 +20,7 @@ export const FieldInput = forwardRef(({
       ref: ref,
       value: value,
       placeholder: placeholder,
+      spellCheck: false,
       ...rest
     });
   }
@@ -28,6 +29,7 @@ export const FieldInput = forwardRef(({
       ref: ref,
       value: value,
       placeholder: placeholder,
+      spellCheck: false,
       style: {
         flex: 'none',
         minWidth: 0,

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;