@lotics/ui 2.3.0 → 2.3.2

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@lotics/ui",
-  "version": "2.3.0",
+  "version": "2.3.2",
   "type": "module",
   "exports": {
     "./tokens": "./src/tokens.ts",

package/src/combobox.tsx

@@ -132,6 +132,13 @@ export function Combobox<T extends string = string, D = unknown>(props: Combobox
   const triggerRef = useRef<View>(null);
   const inputRef = useRef<RNTextInput>(null);
   const scrollRef = useRef<ScrollView>(null);
+  // Options are focusable (RN-Web Pressable), so a mouse-press on one blurs the
+  // input; commit then refocuses it to keep the textbox focus (aria pattern),
+  // which would re-fire onFocus and reopen the popover. This one-shot flag lets
+  // that programmatic refocus pass without reopening — set on a single-select
+  // commit, consumed by the next onFocus, and cleared on blur (the keyboard
+  // path never blurs, so the refocus is a no-op and onFocus never fires).
+  const suppressFocusOpenRef = useRef(false);
   const baseId = useId();
   const listboxId = `${baseId}-listbox`;
   const optionId = (i: number) => `${baseId}-option-${i}`;
@@ -188,6 +195,9 @@ export function Combobox<T extends string = string, D = unknown>(props: Combobox
         setQuery("");
       }
       setOpen(false);
+      // Single-select: the refocus below must not reopen the just-closed menu.
+      // Multi-select keeps the menu open to add more, so it isn't suppressed.
+      if (!multi) suppressFocusOpenRef.current = true;
       inputRef.current?.focus();
     },
     [onValueChange, isServer, debouncedSearch, onSearchChange, multi, reflectSelection],
@@ -278,8 +288,19 @@ export function Combobox<T extends string = string, D = unknown>(props: Combobox
           onClear={onClear}
           onChangeText={handleChangeText}
           onFocus={() => {
+            // A programmatic refocus right after a single-select commit must not
+            // reopen the menu; consume the one-shot flag instead of opening.
+            if (suppressFocusOpenRef.current) {
+              suppressFocusOpenRef.current = false;
+              return;
+            }
             if (!disabled) setOpen(true);
           }}
+          onBlur={() => {
+            // Clear a flag the keyboard path left set (its refocus was a no-op,
+            // so onFocus never consumed it) — the next real focus opens normally.
+            suppressFocusOpenRef.current = false;
+          }}
           onKeyPress={handleKeyPress}
           placeholder={chips.length > 0 ? undefined : placeholder}
           placeholderTextColor={colors.zinc["400"]}
@@ -368,7 +389,7 @@ export function Combobox<T extends string = string, D = unknown>(props: Combobox
                       selected={!multi && !isCustom && single?.value === opt.value}
                       disabled={opt.disabled}
                       onPress={() => handleSelect(i)}
-                      onHoverIn={() => setActiveIndex(i)}
+                      onHoverIn={() => setActiveIndex(i, false)}
                     />
                   );
                 })

package/src/use_list_keyboard_nav.test.ts

@@ -103,4 +103,11 @@ describe("useListKeyboardNav", () => {
     act(() => void view.result.current.handleKey("ArrowDown"));
     expect(onActiveChange).toHaveBeenCalledWith(1);
   });
+
+  it("setActiveIndex moves the active row but skips onActiveChange when scrollIntoView is false (mouse hover)", () => {
+    const { view, onActiveChange } = setup();
+    act(() => view.result.current.setActiveIndex(2, false));
+    expect(view.result.current.activeIndex).toBe(2);
+    expect(onActiveChange).not.toHaveBeenCalled();
+  });
 });

package/src/use_list_keyboard_nav.ts

@@ -17,7 +17,10 @@ export interface ListKeyboardNav {
   /** The virtually-focused row. The list stays visually highlighted here while
    *  DOM focus remains on the controlling input (ARIA `aria-activedescendant`). */
   activeIndex: number;
-  setActiveIndex: (index: number) => void;
+  /** Set the active row. `scrollIntoView` defaults to true (keyboard nav); pass
+   *  false on mouse hover so it doesn't scroll the row into view — the cursor is
+   *  already on it, and scrolling would slide a different row under the cursor. */
+  setActiveIndex: (index: number, scrollIntoView?: boolean) => void;
   /** Feed a key from the controlling input's `onKeyPress`. Returns true when it
    *  handled the key, so the caller can `preventDefault()`. */
   handleKey: (key: string) => boolean;
@@ -34,9 +37,13 @@ export function useListKeyboardNav(opts: ListKeyboardNavOptions): ListKeyboardNa
   const [activeIndex, setActiveIndexState] = useState(0);
 
   const setActiveIndex = useCallback(
-    (index: number) => {
+    (index: number, scrollIntoView = true) => {
       setActiveIndexState(index);
-      onActiveChange?.(index);
+      // Only scroll for keyboard nav. Mouse hover sets the active row without
+      // scrolling — the cursor is already on it, and scrolling it into view
+      // would slide a different row under the cursor → onHoverIn → scroll →
+      // runaway loop.
+      if (scrollIntoView) onActiveChange?.(index);
     },
     [onActiveChange],
   );