[WC-3350] Fix color picker on change

packages/pluggableWidgets/color-picker-web/CHANGELOG.md

@@ -6,6 +6,10 @@ The format is based on [Keep a Changelog](https://keepachangelog.com/en/1.0.0/),
 
 ## [Unreleased]
 
+### Fixed
+
+- We fixed an issue with On change action not triggering in some cases.
+
 ## [2.1.5] - 2026-03-06
 
 ### Fixed

packages/pluggableWidgets/color-picker-web/src/ColorPicker.editorConfig.ts

@@ -1,15 +1,15 @@
+import { hidePropertiesIn, hidePropertyIn, Properties, transformGroupsIntoTabs } from "@mendix/pluggable-widgets-tools";
 import {
     ContainerProps,
     ImageProps,
     RowLayoutProps,
     StructurePreviewProps,
     TextProps
 } from "@mendix/widget-plugin-platform/preview/structure-preview-api";
-import { hidePropertiesIn, hidePropertyIn, Properties, transformGroupsIntoTabs } from "@mendix/pluggable-widgets-tools";
 
 import { ColorPickerPreviewProps } from "../typings/ColorPickerProps";
-import StructurePreviewSvg from "./assets/structure-preview.svg";
 import StructurePreviewSvgDark from "./assets/structure-preview-dark.svg";
+import StructurePreviewSvg from "./assets/structure-preview.svg";
 
 const defaultColorTypes = ["block", "sketch", "circle", "compact", "twitter"];
 

packages/pluggableWidgets/color-picker-web/src/components/Button.tsx

@@ -1,5 +1,5 @@
-import { ReactElement } from "react";
 import classNames from "classnames";
+import { ReactElement } from "react";
 import { ModeEnum } from "../../typings/ColorPickerProps";
 
 export interface ButtonProps {

packages/pluggableWidgets/color-picker-web/src/components/ColorPicker.tsx

@@ -1,6 +1,5 @@
-import { ReactElement, useCallback, useEffect, useState } from "react";
-import { Alert } from "@mendix/widget-plugin-component-kit/Alert";
-import { DefaultColorsType, FormatEnum, ModeEnum, TypeEnum } from "../../typings/ColorPickerProps";
+import classNames from "classnames";
+import { ReactElement, useCallback, useEffect, useMemo, useState, useRef } from "react";
 import {
     BlockPickerProps,
     ChromePickerProps,
@@ -15,10 +14,12 @@
     SwatchesPickerProps,
     TwitterPickerProps
 } from "react-color";
-import classNames from "classnames";
+import { Alert } from "@mendix/widget-plugin-component-kit/Alert";
+import { debounce } from "@mendix/widget-plugin-platform/utils/debounce";
+import { DefaultColorsType, FormatEnum, ModeEnum, TypeEnum } from "../../typings/ColorPickerProps";
 import { getColorPicker, parseColor, validateColorFormat, validateProps } from "../utils";
-import { Input } from "./Input";
 import { Button } from "./Button";
+import { Input } from "./Input";
 
 export interface ColorPickerProps {
     id: string;
@@ -53,18 +54,33 @@
         rgb: "rgb(255,255,255)",
         rgba: "rgb(255,255,255,1)"
     };
-    const { type, mode, disabled, defaultColors, color, format, invalidFormatMessage, onColorChange } = props;
+    const {
+        type,
+        mode,
+        disabled,
+        defaultColors,
+        color,
+        format,
+        invalidFormatMessage,
+        onColorChange,
+        onChange: onColorChangeComplete
+    } = props;
     const ColorElement = getColorPicker(type);
     const [hidden, setHidden] = useState(mode !== "inline");
-    const [currentColor, setCurrentColor] = useState<string | undefined>(color);
+    const currentColor = useRef<string>(color);
     const [alertMessage, setAlertMessage] = useState<string | undefined>();
 
+    const [completeColorChange, abortCompleteColorChange] = useMemo(() => {
+        return debounce(onColorChangeComplete, 500);
+    }, [onColorChangeComplete]);
+
     const submitColor = useCallback(
         (color: string): void => {
-            setCurrentColor(color);
+            currentColor.current = color;
             onColorChange(color);
+            abortCompleteColorChange();
         },
-        [onColorChange]
+        [onColorChange, abortCompleteColorChange]
     );
 
     const validateColor = (colorValue: string): void => {
@@ -93,7 +109,7 @@
     );
 
     const renderInput = (): ReactElement => {
-        const colorValue = currentColor || color;
+        const colorValue = currentColor.current || color;
         return (
             <Input
                 color={colorValue}
@@ -108,11 +124,15 @@
             </Input>
         );
     };
-    const onChangeComplete = (color: ColorState): void => {
-        if (currentColor !== parseColor(color, format)) {
-            props.onChange();
-        }
-    };
+    const onChangeComplete = useCallback(
+        (color: ColorState): void => {
+            if (currentColor.current === parseColor(color, format)) {
+                completeColorChange();
+            }
+        },
+        [format, completeColorChange]
+    );
+
     const renderButton = (): ReactElement => {
         return <Button mode={mode} disabled={disabled} onClick={() => setColorPickerHidden(!hidden)} color={color} />;
     };
@@ -153,7 +173,7 @@
         if (color) {
             validateColor(color);
         }
     }, [color]);
     return (
         <div
             className={classNames("widget-color-picker widget-color-picker-picker", {

packages/pluggableWidgets/color-picker-web/src/utils/index.ts

@@ -1,8 +1,8 @@
+import { FunctionComponent } from "react";
+import { ColorState } from "react-color";
 import * as Picker from "react-color/lib";
 import { FormatEnum, TypeEnum } from "../../typings/ColorPickerProps";
-import { ColorState } from "react-color";
 import { ColorPickerConfigProps, ColorPickerProps } from "../components/ColorPicker";
-import { FunctionComponent } from "react";
 
 export function getColorPicker(type: TypeEnum): FunctionComponent<ColorPickerConfigProps> {
     switch (type) {