[pull] main from webstudio-is:main

packages/design-system/src/components/color-picker.test.ts

@@ -5,6 +5,7 @@ import { __testing__ } from "./color-picker";
 const {
   cssStringToStyleValue,
   shouldCommitColorChange,
+  shouldHandleColorInputChange,
   styleValueToColorInputColorSpace,
   styleValueToColorInputValue,
 } = __testing__;
@@ -49,6 +50,26 @@ describe("shouldCommitColorChange", () => {
   });
 });
 
+describe("shouldHandleColorInputChange", () => {
+  test("ignores color input changes while picker is closed", () => {
+    expect(
+      shouldHandleColorInputChange({ disabled: false, isOpen: false })
+    ).toBe(false);
+  });
+
+  test("handles color input changes while picker is open", () => {
+    expect(
+      shouldHandleColorInputChange({ disabled: false, isOpen: true })
+    ).toBe(true);
+  });
+
+  test("ignores color input changes while disabled", () => {
+    expect(shouldHandleColorInputChange({ disabled: true, isOpen: true })).toBe(
+      false
+    );
+  });
+});
+
 // All ColorSpace values from hdr-color-input and their expected CSS input strings
 // (as <color-input> would emit in its change event).
 describe("cssStringToStyleValue", () => {

packages/design-system/src/components/color-picker.tsx

@@ -187,6 +187,16 @@ const shouldCommitColorChange = (
   return toValue(previousValue) !== toValue(nextValue);
 };
 
+const shouldHandleColorInputChange = ({
+  disabled,
+  isOpen,
+}: {
+  disabled: boolean;
+  isOpen: boolean;
+}) => {
+  return disabled === false && isOpen;
+};
+
 // Renders <color-input> with its built-in trigger chip, hiding the text input.
 // The chip opens the panel natively via the Popover API.
 // Our own ColorThumb is rendered on top (pointer-events: none) so that clicks
@@ -196,6 +206,7 @@ export const __testing__ = {
   styleValueToColorInputColorSpace,
   styleValueToColorInputValue,
   shouldCommitColorChange,
+  shouldHandleColorInputChange,
 };
 
 export const ColorPicker = ({
@@ -314,7 +325,7 @@ export const ColorPicker = ({
     colorInputElement.addEventListener(
       "change",
       (event: Event) => {
-        if (disabled) {
+        if (shouldHandleColorInputChange({ disabled, isOpen }) === false) {
           return;
         }
         const { value, colorspace } = (event as CustomEvent<ChangeDetail>)
@@ -339,6 +350,8 @@ export const ColorPicker = ({
         // before any change event fires (the component's own JS sets --contrast
         // based on raw color only, ignoring alpha).
         isOpen = true;
+        lastStyleValue = callbacksRef.current.value;
+        lastCommittedStyleValue = callbacksRef.current.value;
         callbacksRef.current.disableCanvasPointerEvents();
         document.body.style.userSelect = "none";
         callbacksRef.current.onOpenChange?.(true);