diff --git a/.changeset/perfect-vans-walk.md b/.changeset/perfect-vans-walk.md new file mode 100644 index 0000000000..7f1d2c6d57 --- /dev/null +++ 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 index 72d8149351..361fa89f72 160000 --- a/examples/next-ts/pages/compositions +++ b/examples/next-ts/pages/compositions @@ -1 +1 @@ -Subproject commit 72d8149351e5b40a726de6d4902fd49ebfd86661 +Subproject commit 361fa89f72bf3f0d0af13462731e9fb5639a8fcb diff --git a/packages/machines/combobox/src/combobox.machine.ts b/packages/machines/combobox/src/combobox.machine.ts index eb4f11addf..dae4719434 100644 --- a/packages/machines/combobox/src/combobox.machine.ts +++ b/packages/machines/combobox/src/combobox.machine.ts @@ -712,15 +712,18 @@ export function machine(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(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(userContext: UserDefinedContex }, syncSelectedItems(ctx) { sync.valueChange(ctx) + set.inputValue(ctx, getInputValue(ctx)) }, syncHighlightedItem(ctx) { sync.highlightChange(ctx) @@ -902,6 +908,22 @@ export function machine(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)