From e4e0b2d04a9e6d909db36d8ed0c9ad54790190a6 Mon Sep 17 00:00:00 2001 From: greymoth <246701683+greymoth-jp@users.noreply.github.com> Date: Tue, 30 Jun 2026 01:34:47 +0900 Subject: [PATCH] fix(color-picker): ignore Enter during IME composition in channel input --- .changeset/quiet-pillows-cross.md | 5 +++++ packages/machines/color-picker/src/color-picker.connect.ts | 3 ++- 2 files changed, 7 insertions(+), 1 deletion(-) create mode 100644 .changeset/quiet-pillows-cross.md diff --git a/.changeset/quiet-pillows-cross.md b/.changeset/quiet-pillows-cross.md new file mode 100644 index 0000000000..d7cef434d1 --- /dev/null +++ b/.changeset/quiet-pillows-cross.md @@ -0,0 +1,5 @@ +--- +"@zag-js/color-picker": patch +--- + +Fix the color channel input committing a partial value when `Enter` is pressed to confirm an IME composition. diff --git a/packages/machines/color-picker/src/color-picker.connect.ts b/packages/machines/color-picker/src/color-picker.connect.ts index 95412d454d..034750edcb 100644 --- a/packages/machines/color-picker/src/color-picker.connect.ts +++ b/packages/machines/color-picker/src/color-picker.connect.ts @@ -1,5 +1,5 @@ import { getColorAreaGradient, normalizeColor } from "@zag-js/color-utils" -import { getEventKey, getEventPoint, getEventStep, isLeftClick, isModifierKey } from "@zag-js/dom-query" +import { getEventKey, getEventPoint, getEventStep, isComposingEvent, isLeftClick, isModifierKey } from "@zag-js/dom-query" import { dataAttr, query, visuallyHiddenStyle } from "@zag-js/dom-query" import { getPlacementSide, getPlacementStyles } from "@zag-js/popper" import type { NormalizeProps, PropTypes, EventKeyMap } from "@zag-js/types" @@ -583,6 +583,7 @@ export function connect( onKeyDown(event) { if (event.defaultPrevented) return if (!interactive) return + if (isComposingEvent(event)) return if (event.key === "Enter") { const value = isTextField ? event.currentTarget.value : event.currentTarget.valueAsNumber send({ type: "CHANNEL_INPUT.CHANGE", channel, value, isTextField })