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 })