mendix · r0b1n · Mar 27, 2026 · Mar 27, 2026 · Apr 29, 2026
@@ -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

@@ -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"];
 

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

@@ -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", {

@@ -0,0 +1,147 @@
+import "@testing-library/jest-dom";
+import { render } from "@testing-library/react";
+import userEvent, { UserEvent } from "@testing-library/user-event";
+import { ColorPicker, ColorPickerProps } from "../ColorPicker";
+
+/**
+ * Mock all react-color pickers to expose controllable onChange / onChangeComplete
+ * buttons, while still rendering with the expected CSS class names so the
+ * existing picker-type tests continue to pass.
+ */
+jest.mock("react-color", () => {
+    const colorState = {
+        hex: "#FF0000",
+        rgb: { r: 255, g: 0, b: 0, a: 1 },
+        hsl: { h: 0, s: 1, l: 0.5, a: 1 }
+    };
+
+    type MockPickerProps = {
+        onChange: (c: typeof colorState) => void;
+        onChangeComplete: (c: typeof colorState) => void;
+    };
+
+    const createMockPicker = (cssClass: string) =>
+        function MockPicker({ onChange, onChangeComplete }: MockPickerProps) {
+            return (
+                <div className={cssClass}>
+                    <button data-testid="trigger-change" onClick={() => onChange(colorState)}>
+                        change
+                    </button>
+                    <button data-testid="trigger-change-complete" onClick={() => onChangeComplete(colorState)}>
+                        complete
+                    </button>
+                </div>
+            );
+        };
+
+    return {
+        SketchPicker: createMockPicker("sketch-picker"),
+        ChromePicker: createMockPicker("chrome-picker"),
+        BlockPicker: createMockPicker("block-picker"),
+        GithubPicker: createMockPicker("github-picker"),
+        TwitterPicker: createMockPicker("twitter-picker"),
+        CirclePicker: createMockPicker("circle-picker"),
+        HuePicker: createMockPicker("hue-picker"),
+        SliderPicker: createMockPicker("slider-picker"),
+        CompactPicker: createMockPicker("compact-picker"),
+        MaterialPicker: createMockPicker("material-picker"),
+        SwatchesPicker: createMockPicker("swatches-picker")
+    };
+});
+
+describe("ColorPicker – debounced onChange behavior", () => {
+    /**
+     * color="#FF0000" matches the hex value emitted by the mock picker so that
+     * the guard in onChangeComplete (`currentColor.current === parseColor(color, format)`)
+     * passes and completeColorChange is actually scheduled.
+     */
+    const baseProps: ColorPickerProps = {
+        id: "color-picker",
+        name: "color picker",
+        color: "#FF0000",
+        disabled: false,
+        defaultColors: [],
+        format: "hex",
+        mode: "inline",
+        type: "sketch",
+        onChange: jest.fn(),
+        onColorChange: jest.fn()
+    };
+
+    let user: UserEvent;
+
+    beforeEach(() => {
+        jest.useFakeTimers();
+        // advanceTimers keeps userEvent in sync with fake timers
+        user = userEvent.setup({ advanceTimers: jest.advanceTimersByTime });
+        baseProps.onChange = jest.fn();
+        baseProps.onColorChange = jest.fn();
+    });
+
+    afterEach(() => {
+        jest.useRealTimers();
+    });
+
+    it("does not call onChange immediately after onChangeComplete fires", async () => {
+        const { getByTestId } = render(<ColorPicker {...baseProps} />);
+
+        // onChange sets currentColor.current so the guard in onChangeComplete passes
+        await user.click(getByTestId("trigger-change"));
+        await user.click(getByTestId("trigger-change-complete"));
+
+        // Debounce delay has not elapsed yet
+        expect(baseProps.onChange).not.toHaveBeenCalled();
+    });
+
+    it("calls onChange once after the 500 ms debounce delay", async () => {
+        const { getByTestId } = render(<ColorPicker {...baseProps} />);
+
+        await user.click(getByTestId("trigger-change"));
+        await user.click(getByTestId("trigger-change-complete"));
+
+        expect(baseProps.onChange).not.toHaveBeenCalled();
+
+        jest.advanceTimersByTime(500);
+
+        expect(baseProps.onChange).toHaveBeenCalledTimes(1);
+    });
+
+    it("calls onChange only once when multiple rapid color changes occur", async () => {
+        const { getByTestId } = render(<ColorPicker {...baseProps} />);
+
+        // Each iteration: onChange aborts the previous pending debounce and
+        // onChangeComplete schedules a new one. Only the last scheduled call
+        // survives.
+        for (let i = 0; i < 5; i++) {
+            await user.click(getByTestId("trigger-change"));
+            await user.click(getByTestId("trigger-change-complete"));
+            // Advance less than the debounce window so the timer never fires mid-loop
+            jest.advanceTimersByTime(100);
+        }
+
+        // Let the last pending debounce fire
+        jest.advanceTimersByTime(500);
+
+        expect(baseProps.onChange).toHaveBeenCalledTimes(1);
+    });
+
+    it("does not call onChange if abortCompleteColorChange is called before the delay elapses", async () => {
+        const { getByTestId } = render(<ColorPicker {...baseProps} />);
+
+        // Schedule a completeColorChange via onChangeComplete
+        await user.click(getByTestId("trigger-change"));
+        await user.click(getByTestId("trigger-change-complete"));
+
+        // Advance partway through the debounce window
+        jest.advanceTimersByTime(200);
+
+        // Triggering onChange calls submitColor → abortCompleteColorChange,
+        // cancelling the previously scheduled debounce
+        await user.click(getByTestId("trigger-change"));
+
+        // Advance past the original debounce deadline
+        jest.advanceTimersByTime(500);
+
+        expect(baseProps.onChange).not.toHaveBeenCalled();
+    });
+});
@@ -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) {