fix(color-picker): re-dispatch mouseup in capture phase to prevent stuck drag in popups

Author: rahmanunver

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 where the color picker would enter a stuck drag mode when placed inside a popup page, causing the color to keep changing on mouse move without holding the mouse button.
+
 ## [2.1.6] - 2026-05-07
 
 ### Fixed

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

@@ -83,12 +83,16 @@ export const ColorPicker = (props: ColorPickerProps): ReactElement => {
         [onColorChange, abortCompleteColorChange]
     );
 
-    const validateColor = (colorValue: string): void => {
-        const message = validateColorFormat(colorValue, format);
-        const validProps = validateProps(props);
-        const alertMessage = message ? invalidFormatMessage?.replaceAll(":colors:", message) : undefined;
-        setAlertMessage(validProps || alertMessage);
-    };
+    const validateColor = useCallback(
+        (colorValue: string): void => {
+            const message = validateColorFormat(colorValue, format);
+            const validProps = validateProps(props);
+            const alertMessage = message ? invalidFormatMessage?.replaceAll(":colors:", message) : undefined;
+            setAlertMessage(validProps || alertMessage);
+        },
+        // eslint-disable-next-line react-hooks/exhaustive-deps
+        [format, invalidFormatMessage]
+    );
 
     const setColorPickerHidden = useCallback(
         (hide: boolean): void => {
@@ -174,6 +178,24 @@ export const ColorPicker = (props: ColorPickerProps): ReactElement => {
             validateColor(color);
         }
     }, [color]);
+
+    useEffect(() => {
+        if (hidden) {
+            return undefined;
+        }
+
+        // react-color binds its mouseup cleanup to window in the bubble phase.
+        // A Mendix dialog calls stopPropagation on mouseup, preventing it from
+        // reaching window — leaving the picker stuck in drag mode.
+        // Re-dispatching in the capture phase ensures react-color always sees
+        // the release event regardless of dialog interference.
+        const releaseDrag = (): void => {
+            window.dispatchEvent(new MouseEvent("mouseup"));
+        };
+        document.addEventListener("mouseup", releaseDrag, true);
+        return () => document.removeEventListener("mouseup", releaseDrag, true);
+    }, [hidden]);
+
     return (
         <div
             className={classNames("widget-color-picker widget-color-picker-picker", {

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

@@ -40,6 +40,59 @@ describe("ColorPicker", () => {
         expect(colorPickerProps.onColorChange).toHaveBeenCalled();
     });
 
+    describe("stuck drag fix (popup mouseup re-dispatch)", () => {
+        it("attaches capture-phase mouseup listener on document when picker is visible", async () => {
+            const addSpy = jest.spyOn(document, "addEventListener");
+            const { getByRole } = renderColorPicker({ mode: "popover" });
+            await user.click(getByRole("button"));
+
+            expect(addSpy).toHaveBeenCalledWith("mouseup", expect.any(Function), true);
+            addSpy.mockRestore();
+        });
+
+        it("re-dispatches mouseup on window when document fires mouseup", async () => {
+            const { getByRole } = renderColorPicker({ mode: "popover" });
+            await user.click(getByRole("button"));
+
+            const windowDispatchSpy = jest.spyOn(window, "dispatchEvent");
+            document.dispatchEvent(new MouseEvent("mouseup", { bubbles: true }));
+
+            expect(windowDispatchSpy).toHaveBeenCalledWith(expect.objectContaining({ type: "mouseup" }));
+            windowDispatchSpy.mockRestore();
+        });
+
+        it("does not attach listener when picker is hidden", () => {
+            const addSpy = jest.spyOn(document, "addEventListener");
+            renderColorPicker({ mode: "popover" });
+
+            const mouseupCalls = addSpy.mock.calls.filter(
+                ([event, , capture]) => event === "mouseup" && capture === true
+            );
+            expect(mouseupCalls).toHaveLength(0);
+            addSpy.mockRestore();
+        });
+
+        it("removes capture listener when picker is hidden again", async () => {
+            const removeSpy = jest.spyOn(document, "removeEventListener");
+            const { getByRole } = renderColorPicker({ mode: "popover" });
+            const button = getByRole("button");
+
+            await user.click(button);
+            await user.click(button);
+
+            expect(removeSpy).toHaveBeenCalledWith("mouseup", expect.any(Function), true);
+            removeSpy.mockRestore();
+        });
+
+        it("attaches listener for inline mode (picker always visible)", () => {
+            const addSpy = jest.spyOn(document, "addEventListener");
+            renderColorPicker({ mode: "inline" });
+
+            expect(addSpy).toHaveBeenCalledWith("mouseup", expect.any(Function), true);
+            addSpy.mockRestore();
+        });
+    });
+
     describe("renders a picker of type", () => {
         it("sketch", async () => {
             const { container, getByRole } = renderColorPicker({ type: "sketch" });