@proyecto-viviana/solid-stately 0.4.1 → 0.5.0

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@proyecto-viviana/solid-stately",
-  "version": "0.4.1",
+  "version": "0.5.0",
   "description": "A 1-1 SolidJS port of React Stately - headless state management for UI components",
   "keywords": [
     "headless",

package/src/collections/ListCollection.ts

@@ -160,7 +160,15 @@ export function createListCollection<T>(
     },
     getTextValue = (item: T) => {
       const o = item as CollectionItemLike;
-      return o.textValue ?? o.label ?? String(item);
+      // See createListState: `String(item)` yields "[object Object]" for a plain
+      // object, so widen to name/title and fall back to the item's key.
+      return (
+        o.textValue ??
+        o.label ??
+        o.name ??
+        o.title ??
+        (item != null && typeof item === "object" ? String(o.key ?? o.id ?? "") : String(item))
+      );
     },
     getDisabled = (item: T) => (item as CollectionItemLike).isDisabled ?? false,
   } = options;

package/src/collections/createListState.ts

@@ -83,7 +83,19 @@ export function createListState<T = unknown>(
     const nodes: CollectionNode<T>[] = items.map((item, index) => {
       const o = item as CollectionItemLike;
       const key = p.getKey?.(item) ?? o.key ?? o.id ?? index;
-      const textValue = p.getTextValue?.(item) ?? o.textValue ?? o.label ?? String(item);
+      // Derive the item's display text. Prefer an explicit getter/field, then the
+      // conventional display fields (label/name/title). `String(item)` is the last
+      // resort — right for a primitive item (a bare string/number) but useless for
+      // a plain object, where it yields "[object Object]". That default surfaced
+      // verbatim in a ComboBox/Picker input for `{ id, name }`-shaped items, so fall
+      // back to the item's key rather than "[object Object]".
+      const textValue =
+        p.getTextValue?.(item) ??
+        o.textValue ??
+        o.label ??
+        o.name ??
+        o.title ??
+        (item != null && typeof item === "object" ? String(key) : String(item));
       const isDisabled = p.getDisabled?.(item) ?? o.isDisabled ?? false;
 
       return {

package/src/collections/types.ts

@@ -109,6 +109,9 @@ export interface CollectionItemLike {
   id?: Key;
   textValue?: string;
   label?: string;
+  /** Conventional display fields, read when no textValue/label/getTextValue is given. */
+  name?: string;
+  title?: string;
   isDisabled?: boolean;
 }
 

package/src/combobox/createComboBoxState.ts

@@ -6,7 +6,7 @@
  * either type to filter options or select from a list.
  */
 
-import { createSignal, createMemo, createEffect, type Accessor } from "solid-js";
+import { createSignal, createMemo, createEffect, untrack, type Accessor } from "solid-js";
 import { access, type MaybeAccessor } from "../utils";
 import { createListState } from "../collections/createListState";
 import { createOverlayTriggerState } from "../overlays";
@@ -569,7 +569,22 @@ export function createComboBoxState<T = unknown>(
     }
   });
 
-  // Update input when selection changes (only in single mode)
+  // Keep the input text in sync with the selected item (single mode only).
+  //
+  // This effect must react to the SELECTION and the COLLECTION — when the
+  // selected key changes, or when its item (and thus textValue) resolves as
+  // items load — but it must NOT react to the input value itself. The previous
+  // port compared `textValue !== inputValue()`, reading `inputValue()` inside
+  // the effect; in Solid that subscribes the effect to the input signal, so it
+  // re-ran on every keystroke and — while any selection was active — immediately
+  // reset the input back to the selected item's text. The result: the user
+  // could neither type nor delete in the field.
+  //
+  // The comparison is unchanged, but `inputValue()` is now read via `untrack`,
+  // so it is used only to decide whether a reset is needed and never becomes a
+  // dependency. `originalCollection()` stays tracked (the unfiltered collection
+  // only changes when `items` change, never on filtering) so a preset selection
+  // still gets its text once async items arrive.
   createEffect(() => {
     if (isMultiple()) return;
     const key = selectedKey();
@@ -578,7 +593,7 @@ export function createComboBoxState<T = unknown>(
 
     // Only update if selection changed and not fully controlled
     if (!isInputControlled() || !isSelectionControlled()) {
-      if (key != null && textValue !== inputValue()) {
+      if (key != null && textValue !== untrack(inputValue)) {
         setInputValue(textValue);
         setLastValue(textValue);
       }

package/src/tabs/createTabListState.ts

@@ -88,7 +88,15 @@ export function createTabListState<T = unknown>(
     const nodes: CollectionNode<T>[] = items.map((item, index) => {
       const o = item as CollectionItemLike;
       const key = p.getKey?.(item) ?? o.key ?? o.id ?? index;
-      const textValue = p.getTextValue?.(item) ?? o.textValue ?? o.label ?? String(item);
+      // See createListState: `String(item)` yields "[object Object]" for a plain
+      // object, so widen to name/title and fall back to the key for object items.
+      const textValue =
+        p.getTextValue?.(item) ??
+        o.textValue ??
+        o.label ??
+        o.name ??
+        o.title ??
+        (item != null && typeof item === "object" ? String(key) : String(item));
       const isDisabled = p.getDisabled?.(item) ?? o.isDisabled ?? false;
 
       return {