fix(combobox): selection value call

chakra-ui · Oct 26, 2024 · 649b8e6 · 649b8e6
1 parent 79f6e71
commit 649b8e6
Show file tree

Hide file tree

Showing 3 changed files with 29 additions and 24 deletions.
diff --git a/.changeset/perfect-vans-walk.md b/.changeset/perfect-vans-walk.md
@@ -0,0 +1,5 @@
+---
+"@zag-js/combobox": patch
+---
+
+Fix issue where `getSelectionValue` could gets called multiple times. Now, it only gets called when a selection is made.
diff --git a/examples/next-ts/pages/compositions b/examples/next-ts/pages/compositions
diff --git a/packages/machines/combobox/src/combobox.machine.ts b/packages/machines/combobox/src/combobox.machine.ts
@@ -712,15 +712,18 @@ export function machine<T extends CollectionItem>(userContext: UserDefinedContex
         },
         selectHighlightedItem(ctx) {
           set.value(ctx, ctx.highlightedValue)
+          set.inputValue(ctx, getInputValue(ctx, true))
         },
         selectItem(ctx, evt) {
           if (evt.value == null) return
           set.value(ctx, evt.value)
+          set.inputValue(ctx, getInputValue(ctx, true))
         },
         clearItem(ctx, evt) {
           if (evt.value == null) return
           const value = ctx.value.filter((v) => v !== evt.value)
           set.value(ctx, value)
+          set.inputValue(ctx, getInputValue(ctx))
         },
         setInitialFocus(ctx) {
           raf(() => {
@@ -791,9 +794,11 @@ export function machine<T extends CollectionItem>(userContext: UserDefinedContex
         setSelectedItems(ctx, evt) {
           if (!isArray(evt.value)) return
           set.value(ctx, evt.value)
+          set.inputValue(ctx, getInputValue(ctx))
         },
         clearSelectedItems(ctx) {
           set.value(ctx, [])
+          set.inputValue(ctx, getInputValue(ctx))
         },
         scrollContentToTop(ctx) {
           if (ctx.scrollToIndexFn) {
@@ -890,6 +895,7 @@ export function machine<T extends CollectionItem>(userContext: UserDefinedContex
         },
         syncSelectedItems(ctx) {
           sync.valueChange(ctx)
+          set.inputValue(ctx, getInputValue(ctx))
         },
         syncHighlightedItem(ctx) {
           sync.highlightChange(ctx)
@@ -902,6 +908,22 @@ export function machine<T extends CollectionItem>(userContext: UserDefinedContex
   )
 }
 
+function getInputValue(ctx: MachineContext, selection?: boolean) {
+  if (ctx.getSelectionValue && selection) {
+    return ctx.getSelectionValue({
+      inputValue: ctx.inputValue,
+      selectedItems: Array.from(ctx.selectedItems),
+      valueAsString: ctx.valueAsString,
+    })
+  }
+
+  return match(ctx.selectionBehavior, {
+    preserve: ctx.inputValue,
+    replace: ctx.valueAsString,
+    clear: "",
+  })
+}
+
 const sync = {
   valueChange: (ctx: MachineContext) => {
     // side effect
@@ -913,29 +935,7 @@ const sync = {
       return ctx.collection.find(v)
     })
 
-    const valueAsString = ctx.collection.stringifyItems(ctx.selectedItems)
-    ctx.valueAsString = valueAsString
-
-    // set inputValue
-    let inputValue: string | undefined
-    if (ctx.getSelectionValue) {
-      //
-      inputValue = ctx.getSelectionValue({
-        inputValue: ctx.inputValue,
-        selectedItems: Array.from(ctx.selectedItems),
-        valueAsString,
-      })
-      //
-    } else {
-      //
-      inputValue = match(ctx.selectionBehavior, {
-        replace: ctx.valueAsString,
-        preserve: ctx.inputValue,
-        clear: "",
-      })
-    }
-
-    set.inputValue(ctx, inputValue)
+    ctx.valueAsString = ctx.collection.stringifyItems(ctx.selectedItems)
   },
   highlightChange: (ctx: MachineContext) => {
     ctx.highlightedItem = ctx.collection.find(ctx.highlightedValue)