@simplysm/solid 13.0.76 → 13.0.77

package/src/providers/shared-data/SharedDataProvider.tsx

@@ -1,9 +1,10 @@
 import { type Accessor, type JSX, createContext, createMemo, createSignal, onCleanup, useContext } from "solid-js";
-import { objEqual, waitUntil } from "@simplysm/core-common";
+import { obj, wait as waitU } from "@simplysm/core-common";
 import { SharedDataChangeEvent } from "./SharedDataChangeEvent";
 import { useServiceClient } from "../ServiceClientProvider";
 import { useNotification } from "../../components/feedback/notification/NotificationProvider";
 import { useLogger } from "../../hooks/useLogger";
+import type { ServiceClient } from "@simplysm/service-client";
 
 /**
  * Shared data definition.
@@ -92,9 +93,11 @@ export function useSharedData<
   if (!context) {
     throw new Error("useSharedData can only be used inside SharedDataProvider");
   }
-  return context as unknown as SharedDataValue<TSharedData>;
+  return context as SharedDataValue<TSharedData>;
 }
 
+type EntryState = "idle" | "initializing" | "ready" | "error";
+
 /**
  * Shared data Provider.
  *
@@ -102,7 +105,7 @@ export function useSharedData<
  * - Must be used inside ServiceClientProvider and NotificationProvider
  * - Logs fetch failures to logger if LoggerProvider is present
  * - Before configure(): only wait, busy, configure are accessible. Data access throws
- * - After configure(): registers definitions. Registers server event listeners + fetch on first items()/get() access per key (lazy)
+ * - After configure(): registers definitions and immediately starts fetching data for all entries
  * - Prevents data inversion on concurrent fetch calls via version counter
  * - Displays danger notification to the user on fetch failure
  * - Automatically releases all event listeners on cleanup
@@ -132,17 +135,14 @@ export function SharedDataProvider(props: { children: JSX.Element }): JSX.Elemen
   const [busyCount, setBusyCount] = createSignal(0);
   const busy: Accessor<boolean> = () => busyCount() > 0;
 
-  const signalMap = new Map<string, ReturnType<typeof createSignal<unknown[]>>>();
-  const memoMap = new Map<string, Accessor<Map<string | number, unknown>>>();
-  const listenerKeyMap = new Map<string, string>();
-  const versionMap = new Map<string, number>();
   const accessors: Record<string, SharedDataAccessor<unknown>> = {};
-  let currentDefinitions: Record<string, SharedDataDefinition<unknown>> | undefined;
 
-  function ordering<TT>(data: TT[], orderByList: [(item: TT) => unknown, "asc" | "desc"][]): TT[] {
+  let disposed = false;
+
+  function ordering<TItem>(data: TItem[], orderByList: [(item: TItem) => unknown, "asc" | "desc"][]): TItem[] {
     let result = [...data];
     for (const orderBy of [...orderByList].reverse()) {
-      const selector = (item: TT) => orderBy[0](item) as string | number | undefined;
+      const selector = (item: TItem) => orderBy[0](item) as string | number | undefined;
       if (orderBy[1] === "desc") {
         result = result.orderByDesc(selector);
       } else {
@@ -152,49 +152,137 @@ export function SharedDataProvider(props: { children: JSX.Element }): JSX.Elemen
     return result;
   }
 
-  async function loadData(
+  function createSharedDataEntry(
     name: string,
     def: SharedDataDefinition<unknown>,
-    changeKeys?: Array<string | number>,
-  ): Promise<void> {
-    // CR-1: Prevent data inversion on concurrent calls via version counter
-    const currentVersion = (versionMap.get(name) ?? 0) + 1;
-    versionMap.set(name, currentVersion);
+    client: ServiceClient,
+  ): SharedDataAccessor<unknown> & { cleanup: () => void; initialize: () => Promise<void> } {
+    const [items, setItems] = createSignal<unknown[]>([]);
 
-    setBusyCount((c) => c + 1);
-    try {
-      const signal = signalMap.get(name);
-      if (!signal) throw new Error(`No shared data store found for '${name}'.`);
+    const itemMap = createMemo(() => {
+      const map = new Map<string | number, unknown>();
+      for (const item of items()) {
+        map.set(def.getKey(item as never), item);
+      }
+      return map;
+    });
 
-      const [, setItems] = signal;
-      const resData = await def.fetch(changeKeys);
+    let state: EntryState = "idle";
+    let listenerKey: string | undefined;
+    let version = 0;
 
-      // CR-1: Ignore stale responses
-      if (versionMap.get(name) !== currentVersion) return;
+    async function loadData(changeKeys?: Array<string | number>): Promise<void> {
+      // Prevent data inversion on concurrent calls via version counter
+      const currentVersion = ++version;
 
-      if (!changeKeys) {
-        setItems(ordering(resData, def.orderBy));
-      } else {
-        setItems((prev) => {
-          const filtered = prev.filter((item) => !changeKeys.includes(def.getKey(item as never)));
-          filtered.push(...resData);
-          return ordering(filtered, def.orderBy);
-        });
+      setBusyCount((c) => c + 1);
+      try {
+        const resData = await def.fetch(changeKeys);
+
+        // Ignore stale responses
+        if (version !== currentVersion) return;
+
+        if (!changeKeys) {
+          setItems(ordering(resData, def.orderBy));
+        } else {
+          setItems((prev) => {
+            const filtered = prev.filter((item) => !changeKeys.includes(def.getKey(item as never)));
+            filtered.push(...resData);
+            return ordering(filtered, def.orderBy);
+          });
+        }
+      } catch (err) {
+        logger.error(`SharedData '${name}' fetch failed:`, err);
+        notification.danger(
+          "Shared data load failed",
+          err instanceof Error ? err.message : `Error occurred while loading '${name}' data.`,
+        );
+        throw err;
+      } finally {
+        setBusyCount((c) => c - 1);
+      }
+    }
+
+    async function initialize(): Promise<void> {
+      if (state !== "idle" && state !== "error") return;
+
+      // Clean up leaked listener from previous failed attempt
+      if (listenerKey != null) {
+        void client.removeListener(listenerKey);
+        listenerKey = undefined;
+      }
+
+      state = "initializing";
+
+      // Increment busyCount synchronously so wait() sees busy state immediately
+      setBusyCount((c) => c + 1);
+
+      try {
+        const key = await client.addListener(
+          SharedDataChangeEvent,
+          { name, filter: def.filter },
+          async (changeKeys) => {
+            try {
+              await loadData(changeKeys);
+            } catch {
+              // Error already logged and notified in loadData
+            }
+          },
+        );
+
+        if (disposed) {
+          void client.removeListener(key);
+          return;
+        }
+
+        listenerKey = key;
+
+        await loadData();
+
+        state = "ready";
+      } catch {
+        state = "error";
+      } finally {
+        setBusyCount((c) => c - 1);
+      }
+    }
+
+    function cleanup(): void {
+      if (listenerKey != null) {
+        void client.removeListener(listenerKey);
       }
-    } catch (err) {
-      // CR-2: Notify user on fetch failure
-      logger.error(`SharedData '${name}' fetch failed:`, err);
-      notification.danger(
-        "Shared data load failed",
-        err instanceof Error ? err.message : `Error occurred while loading '${name}' data.`,
-      );
-    } finally {
-      setBusyCount((c) => c - 1);
     }
+
+    return {
+      items: () => {
+        void initialize();
+        return items();
+      },
+      get: (key: string | number | undefined) => {
+        void initialize();
+        if (key === undefined) return undefined;
+        return itemMap().get(key);
+      },
+      emit: async (changeKeys?: Array<string | number>) => {
+        await client.emitEvent(
+          SharedDataChangeEvent,
+          (info) => info.name === name && obj.equal(info.filter, def.filter),
+          changeKeys,
+        );
+      },
+      getKey: def.getKey,
+      itemSearchText: def.itemSearchText,
+      isItemHidden: def.isItemHidden,
+      getParentKey: def.getParentKey,
+      cleanup,
+      initialize,
+    };
   }
 
+  const entries = new Map<string, ReturnType<typeof createSharedDataEntry>>();
+
   async function wait(): Promise<void> {
-    await waitUntil(() => busyCount() <= 0);
+    await waitU.until(() => busyCount() <= 0);
   }
 
   function configure(
@@ -208,85 +296,20 @@ export function SharedDataProvider(props: { children: JSX.Element }): JSX.Elemen
     configured = true;
 
     const definitions = fn({});
-    currentDefinitions = definitions;
 
     for (const [name, def] of Object.entries(definitions)) {
-      const [items, setItems] = createSignal<unknown[]>([]);
-      signalMap.set(name, [items, setItems]);
-
-      const itemMap = createMemo(() => {
-        const map = new Map<string | number, unknown>();
-        for (const item of items()) {
-          map.set(def.getKey(item as never), item);
-        }
-        return map;
-      });
-      memoMap.set(name, itemMap);
-
       const client = serviceClient.get(def.serviceKey ?? "default");
-
-      let initialized = false;
-
-      function ensureInitialized() {
-        if (initialized) return;
-        initialized = true;
-
-        void client
-          .addEventListener(
-            SharedDataChangeEvent,
-            { name, filter: def.filter },
-            async (changeKeys) => {
-              await loadData(name, def, changeKeys);
-            },
-          )
-          .then((key) => {
-            if (disposed) {
-              void client.removeEventListener(key);
-            } else {
-              listenerKeyMap.set(name, key);
-            }
-          });
-
-        void loadData(name, def);
-      }
-
-      accessors[name] = {
-        items: () => {
-          ensureInitialized();
-          return items();
-        },
-        get: (key: string | number | undefined) => {
-          ensureInitialized();
-          if (key === undefined) return undefined;
-          return itemMap().get(key);
-        },
-        emit: async (changeKeys?: Array<string | number>) => {
-          await client.emitToServer(
-            SharedDataChangeEvent,
-            (info) => info.name === name && objEqual(info.filter, def.filter),
-            changeKeys,
-          );
-        },
-        getKey: def.getKey,
-        itemSearchText: def.itemSearchText,
-        isItemHidden: def.isItemHidden,
-        getParentKey: def.getParentKey,
-      };
+      const entry = createSharedDataEntry(name, def, client);
+      entries.set(name, entry);
+      accessors[name] = entry;
+      void entry.initialize();
     }
   }
 
-  let disposed = false;
-
   onCleanup(() => {
     disposed = true;
-    if (!currentDefinitions) return;
-    for (const [name] of Object.entries(currentDefinitions)) {
-      const listenerKey = listenerKeyMap.get(name);
-      if (listenerKey != null) {
-        const def = currentDefinitions[name];
-        const client = serviceClient.get(def.serviceKey ?? "default");
-        void client.removeEventListener(listenerKey);
-      }
+    for (const entry of entries.values()) {
+      entry.cleanup();
     }
   });
 

package/tests/components/data/sheet/DataSheet.spec.tsx

@@ -5,8 +5,8 @@ import {
   applySorting,
   collectAllExpandable,
   flattenTree,
-} from "../../../../src/components/data/sheet/sheetUtils";
-import type { SortingDef } from "../../../../src/components/data/sheet/types";
+} from "../../../../src/components/data/sheet/DataSheet.utils";
+import type { SortingDef } from "../../../../src/components/data/sheet/DataSheet.types";
 import { ConfigContext, ConfigProvider } from "../../../../src/providers/ConfigContext";
 import type { JSX } from "solid-js";
 import { I18nProvider } from "../../../../src/providers/i18n/I18nProvider";

package/tests/components/data/sheet/hooks/useDataSheetFixedColumns.spec.ts

@@ -1,7 +1,7 @@
 import { describe, it, expect } from "vitest";
 import { createRoot } from "solid-js";
 import { useDataSheetFixedColumns } from "../../../../../src/components/data/sheet/hooks/useDataSheetFixedColumns";
-import type { DataSheetColumnDef } from "../../../../../src/components/data/sheet/types";
+import type { DataSheetColumnDef } from "../../../../../src/components/data/sheet/DataSheet.types";
 
 interface TestItem {
   id: number;

package/tests/components/data/sheet/hooks/useDataSheetSelection.spec.ts

@@ -1,7 +1,7 @@
 import { describe, it, expect } from "vitest";
 import { createRoot } from "solid-js";
 import { useDataSheetSelection } from "../../../../../src/components/data/sheet/hooks/useDataSheetSelection";
-import type { FlatItem } from "../../../../../src/components/data/sheet/types";
+import type { FlatItem } from "../../../../../src/components/data/sheet/DataSheet.types";
 
 interface TestItem {
   id: string;
@@ -56,23 +56,23 @@ describe("useDataSheetSelection", () => {
     });
   });
 
-  it("getItemSelectable should return false when item is not selectable", () => {
+  it("getItemSelectable should return disabled string when item is not selectable", () => {
     createRoot(() => {
-      const itemSelectable = (item: TestItem) => item.selectable !== false;
+      const isItemSelectable = (item: TestItem): true | string => item.selectable !== false ? true : "disabled";
       const result = useDataSheetSelection(
-        { itemSelectable },
+        { isItemSelectable },
         () => createTestFlatItems(testItems),
       );
 
-      expect(result.getItemSelectable(testItems[2])).toBe(false);
+      expect(result.getItemSelectable(testItems[2])).toBe("disabled");
     });
   });
 
   it("getItemSelectable should return reason string when item is disabled", () => {
     createRoot(() => {
-      const itemSelectable = (item: TestItem) => item.disabledReason != null && item.disabledReason !== "" ? item.disabledReason : true;
+      const isItemSelectable = (item: TestItem) => item.disabledReason != null && item.disabledReason !== "" ? item.disabledReason : true;
       const result = useDataSheetSelection(
-        { itemSelectable },
+        { isItemSelectable },
         () => createTestFlatItems(testItems),
       );
 
@@ -134,9 +134,9 @@ describe("useDataSheetSelection", () => {
 
   it("toggleSelect should not select non-selectable items", () => {
     createRoot(() => {
-      const itemSelectable = (item: TestItem) => item.selectable !== false;
+      const isItemSelectable = (item: TestItem): true | string => item.selectable !== false ? true : "disabled";
       const result = useDataSheetSelection(
-        { itemSelectable },
+        { isItemSelectable },
         () => createTestFlatItems(testItems),
       );
 
@@ -174,9 +174,9 @@ describe("useDataSheetSelection", () => {
 
   it("toggleSelectAll should select all selectable items", () => {
     createRoot(() => {
-      const itemSelectable = (item: TestItem) => item.selectable !== false;
+      const isItemSelectable = (item: TestItem): true | string => item.selectable !== false ? true : "disabled";
       const result = useDataSheetSelection(
-        { itemSelectable },
+        { isItemSelectable },
         () => createTestFlatItems(testItems),
       );
 
@@ -189,10 +189,10 @@ describe("useDataSheetSelection", () => {
 
   it("toggleSelectAll should deselect all items when all are selected", () => {
     createRoot(() => {
-      const itemSelectable = (item: TestItem) => item.selectable !== false;
+      const isItemSelectable = (item: TestItem): true | string => item.selectable !== false ? true : "disabled";
       const selectableItems = testItems.filter((i) => i.selectable !== false);
       const result = useDataSheetSelection(
-        { itemSelectable, selection: selectableItems },
+        { isItemSelectable, selection: selectableItems },
         () => createTestFlatItems(testItems),
       );
 
@@ -204,9 +204,9 @@ describe("useDataSheetSelection", () => {
 
   it("toggleSelectAll should only select selectable items", () => {
     createRoot(() => {
-      const itemSelectable = (item: TestItem) => item.selectable !== false;
+      const isItemSelectable = (item: TestItem): true | string => item.selectable !== false ? true : "disabled";
       const result = useDataSheetSelection(
-        { itemSelectable },
+        { isItemSelectable },
         () => createTestFlatItems(testItems),
       );
 
@@ -284,9 +284,9 @@ describe("useDataSheetSelection", () => {
 
   it("rangeSelect should only select selectable items in range", () => {
     createRoot(() => {
-      const itemSelectable = (item: TestItem) => item.selectable !== false;
+      const isItemSelectable = (item: TestItem): true | string => item.selectable !== false ? true : "disabled";
       const result = useDataSheetSelection(
-        { selectionMode: "multiple", itemSelectable },
+        { selectionMode: "multiple", isItemSelectable },
         () => createTestFlatItems(testItems),
       );
 
@@ -342,4 +342,21 @@ describe("useDataSheetSelection", () => {
       expect(result.lastClickAction()).toBe("select");
     });
   });
+
+  it("treats false return from isItemSelectable as not selectable", () => {
+    createRoot((dispose) => {
+      const flatItems = () => createTestFlatItems(testItems);
+      const sel = useDataSheetSelection<TestItem>(
+        {
+          selectionMode: "multiple",
+          isItemSelectable: (item) => (item.selectable === false ? false : true),
+        },
+        flatItems,
+      );
+      expect(sel.getItemSelectable(testItems[2])).toBe(false);
+      sel.toggleSelect(testItems[2]);
+      expect(sel.selection()).toEqual([]);
+      dispose();
+    });
+  });
 });

package/tests/components/data/sheet/hooks/useDataSheetSorting.spec.ts

@@ -1,7 +1,7 @@
 import { describe, it, expect } from "vitest";
 import { createRoot, createSignal } from "solid-js";
 import { useDataSheetSorting } from "../../../../../src/components/data/sheet/hooks/useDataSheetSorting";
-import type { SortingDef } from "../../../../../src/components/data/sheet/types";
+import type { SortingDef } from "../../../../../src/components/data/sheet/DataSheet.types";
 
 interface TestItem {
   id: number;

package/tests/components/disclosure/Dialog.spec.tsx

@@ -207,11 +207,11 @@ describe("Dialog", () => {
       expect(handleOpenChange).not.toHaveBeenCalled();
     });
 
-    it("does not close when canDeactivate returns false", async () => {
+    it("does not close when beforeClose returns false", async () => {
       const handleOpenChange = vi.fn();
       render(() => (
         <ConfigProvider clientName="test"><I18nProvider>
-          <Dialog open={true} onOpenChange={handleOpenChange} canDeactivate={() => false}>
+          <Dialog open={true} onOpenChange={handleOpenChange} beforeClose={() => false}>
           <Dialog.Header>테스트</Dialog.Header>
           <div>내용</div>
         </Dialog>
@@ -264,7 +264,7 @@ describe("Dialog", () => {
     it("does not set aria-modal in float mode", async () => {
       render(() => (
         <ConfigProvider clientName="test"><I18nProvider>
-          <Dialog open={true} float>
+          <Dialog open={true} mode="float">
           <Dialog.Header>플로팅 다이얼로그</Dialog.Header>
           <div>내용</div>
         </Dialog>
@@ -280,10 +280,10 @@ describe("Dialog", () => {
   });
 
   describe("float mode", () => {
-    it("has no backdrop when float=true", async () => {
+    it("has no backdrop when mode='float'", async () => {
       render(() => (
         <ConfigProvider clientName="test"><I18nProvider>
-          <Dialog open={true} float>
+          <Dialog open={true} mode="float">
           <Dialog.Header>테스트</Dialog.Header>
           <div data-testid="content">내용</div>
         </Dialog>
@@ -298,10 +298,10 @@ describe("Dialog", () => {
   });
 
   describe("fill mode", () => {
-    it("applies fill style to dialog when fill=true", async () => {
+    it("applies fill style to dialog when mode='fill'", async () => {
       render(() => (
         <ConfigProvider clientName="test"><I18nProvider>
-          <Dialog open={true} fill>
+          <Dialog open={true} mode="fill">
           <Dialog.Header>테스트</Dialog.Header>
           <div>내용</div>
         </Dialog>

package/tests/components/display/Barcode.spec.tsx

@@ -1,5 +1,5 @@
 import { render } from "@solidjs/testing-library";
-import { describe, it, expect } from "vitest";
+import { describe, it, expect, vi } from "vitest";
 import { createSignal } from "solid-js";
 import { Barcode } from "../../../src/components/display/Barcode";
 
@@ -18,6 +18,20 @@ describe("Barcode", () => {
     });
   });
 
+  it("logs warning on render failure", () => {
+    const warnSpy = vi.spyOn(console, "warn").mockImplementation(() => {});
+
+    // "code128" requires specific format; passing invalid chars triggers bwip-js error
+    render(() => <Barcode type={"invalid-type" as any} value="test" />);
+
+    expect(warnSpy).toHaveBeenCalledWith(
+      "Barcode render failed:",
+      expect.any(Error),
+    );
+
+    warnSpy.mockRestore();
+  });
+
   describe("reactivity", () => {
     it("updates SVG when value changes", () => {
       const [value, setValue] = createSignal("first");

package/tests/components/features/crud-sheet/CrudSheet.spec.tsx

@@ -25,7 +25,7 @@ function DialogWrapper(props: { children: JSX.Element }) {
   return (
     <ConfigContext.Provider value={{ clientName: "test" }}>
       <NotificationProvider>
-        <Dialog open fill>
+        <Dialog open mode="fill">
           <Dialog.Header>Test Dialog</Dialog.Header>
           {props.children}
         </Dialog>
@@ -174,7 +174,7 @@ describe("CrudSheet inline edit", () => {
         <CrudSheet<TestItem, Record<string, never>>
           search={searchFn}
           getItemKey={(item) => item.id}
-          itemDeleted={(item) => item.isDeleted}
+          isItemDeleted={(item) => item.isDeleted}
           inlineEdit={{
             submit: () => Promise.resolve(),
             newItem: () => ({ name: "", isDeleted: false }),
@@ -196,7 +196,7 @@ describe("CrudSheet inline edit", () => {
   });
 });
 
-describe("CrudSheet itemDeletable", () => {
+describe("CrudSheet isItemDeletable", () => {
   beforeEach(() => {
     localStorage.setItem("test.i18n-locale", JSON.stringify("en"));
   });
@@ -205,7 +205,7 @@ describe("CrudSheet itemDeletable", () => {
     localStorage.removeItem("test.i18n-locale");
   });
 
-  it("inline delete button is disabled for items where itemDeletable=false", async () => {
+  it("inline delete button is disabled for items where isItemDeletable=false", async () => {
     const searchFn = () =>
       Promise.resolve({
         items: [
@@ -221,8 +221,8 @@ describe("CrudSheet itemDeletable", () => {
         <CrudSheet<TestItem, Record<string, never>>
           search={searchFn}
           getItemKey={(item) => item.id}
-          itemDeletable={(item) => item.id !== 1}
-          itemDeleted={(item) => item.isDeleted}
+          isItemDeletable={(item) => item.id !== 1}
+          isItemDeleted={(item) => item.isDeleted}
           inlineEdit={{
             submit: () => Promise.resolve(),
             newItem: () => ({ name: "", isDeleted: false }),

package/tests/components/form-control/Invalid.spec.tsx

@@ -90,10 +90,10 @@ describe("Invalid component", () => {
     });
   });
 
-  describe("touchMode", () => {
-    it("has no visual indication initially in touchMode", () => {
+  describe("lazyValidation", () => {
+    it("has no visual indication initially in lazyValidation", () => {
       const { container } = render(() => (
-        <Invalid variant="border" message="error" touchMode>
+        <Invalid variant="border" message="error" lazyValidation>
           <div data-testid="target" class="border">
             Content
           </div>
@@ -103,9 +103,9 @@ describe("Invalid component", () => {
       expect(target.classList.contains("border-danger-500")).toBe(false);
     });
 
-    it("setCustomValidity is always set in touchMode", () => {
+    it("setCustomValidity is always set in lazyValidation", () => {
       const { container } = render(() => (
-        <Invalid variant="border" message="error" touchMode>
+        <Invalid variant="border" message="error" lazyValidation>
           <div>Content</div>
         </Invalid>
       ));

package/tests/components/form-control/combobox/Combobox.spec.tsx

@@ -132,7 +132,7 @@ describe("Combobox component", () => {
   });
 
   describe("allowsCustomValue", () => {
-    it("allows entering custom value with Enter when allowsCustomValue is true", () => {
+    it("allows entering custom value with Enter when allowsCustomValue and parseCustomValue are provided", () => {
       const handleChange = vi.fn();
       const loadItems = vi.fn(() => Promise.resolve([]));
 
@@ -142,6 +142,7 @@ describe("Combobox component", () => {
             loadItems={loadItems}
             onValueChange={handleChange}
             allowsCustomValue
+            parseCustomValue={(text) => text}
             renderValue={(v) => <>{v}</>}
           />
         </I18nProvider></ConfigProvider>
@@ -176,6 +177,28 @@ describe("Combobox component", () => {
 
       expect(handleChange).toHaveBeenCalledWith({ name: "테스트", custom: true });
     });
+
+    it("sets undefined when allowsCustomValue is true without parseCustomValue", async () => {
+      const onValueChange = vi.fn();
+      const { container, getByRole } = render(() => (
+        <ConfigProvider clientName="test"><I18nProvider>
+          <Combobox
+            loadItems={() => []}
+            renderValue={(v: string) => <>{v}</>}
+            allowsCustomValue
+            onValueChange={onValueChange}
+          />
+        </I18nProvider></ConfigProvider>
+      ));
+
+      const input = container.querySelector("input")!;
+      fireEvent.input(input, { target: { value: "custom text" } });
+      fireEvent.keyDown(getByRole("combobox"), { key: "Enter" });
+
+      await waitFor(() => {
+        expect(onValueChange).toHaveBeenCalledWith(undefined);
+      });
+    });
   });
 
   describe("validation", () => {