@pushwoosh/dumb-components 2.9.16 → 2.9.18

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,30 @@ function SelectCombobox({
   const valueLabel = hasValue ? getLabel(value) : '';
   const selectedKey = hasValue ? getKey(value) : null;
   const inputValue = isOpen ? query : valueLabel;
+  const userMovedRef = useRef(false);
+  const selectedIndex = sourceItems.findIndex(it => getKey(it) === selectedKey);
+  const activateSelected = useCallback(() => {
+    userMovedRef.current = false;
+    setActiveIndex(selectedIndex >= 0 ? selectedIndex : 0);
+  }, [selectedIndex, setActiveIndex]);
   const open = useCallback(() => {
     if (isOpen) return;
     setIsOpen(true);
     setQuery('');
-    const idx = sourceItems.findIndex(it => getKey(it) === selectedKey);
-    setActiveIndex(idx >= 0 ? idx : 0);
-  }, [isOpen, sourceItems, getKey, selectedKey, setActiveIndex]);
+    activateSelected();
+  }, [isOpen, activateSelected]);
+  useEffect(() => {
+    if (!isOpen || query || userMovedRef.current || selectedIndex < 0) return;
+    setActiveIndex(selectedIndex);
+  }, [isOpen, query, selectedIndex, setActiveIndex]);
+  const moveActive = useCallback(next => {
+    userMovedRef.current = true;
+    setActiveIndex(next);
+  }, [setActiveIndex]);
+  const search = event => {
+    setQuery(event.target.value);
+    if (event.target.value) moveActive(0);else activateSelected();
+  };
   const close = useCallback(() => {
     setIsOpen(false);
     setQuery('');
@@ -221,7 +240,7 @@ function SelectCombobox({
     open,
     itemCount: filteredItems.length,
     activeIndex,
-    setActiveIndex,
+    setActiveIndex: moveActive,
     onSelectIndex: index => commit(filteredItems[index]),
     onEscape: close,
     onReachEnd: loadMore
@@ -282,7 +301,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.16",
+  "version": "2.9.18",
   "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,