From c52b1d6cab8029ef21ec61fa0931a2dfdea886a9 Mon Sep 17 00:00:00 2001 From: Roman Vyakhirev Date: Fri, 27 Feb 2026 12:01:46 +0100 Subject: [PATCH] fix: fix stale setValue reference --- .../color-picker-web/CHANGELOG.md | 4 ++++ .../src/components/ColorPicker.tsx | 15 +++++++++------ 2 files changed, 13 insertions(+), 6 deletions(-) diff --git a/packages/pluggableWidgets/color-picker-web/CHANGELOG.md b/packages/pluggableWidgets/color-picker-web/CHANGELOG.md index f36f590e42..068661ebd3 100644 --- a/packages/pluggableWidgets/color-picker-web/CHANGELOG.md +++ b/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 widget would still change values in the previous Data View context after a context switch in the "listen to widget" setup. + ## [2.1.4] - 2026-02-09 ### Added diff --git a/packages/pluggableWidgets/color-picker-web/src/components/ColorPicker.tsx b/packages/pluggableWidgets/color-picker-web/src/components/ColorPicker.tsx index 950ccf6bd2..db296cc164 100644 --- a/packages/pluggableWidgets/color-picker-web/src/components/ColorPicker.tsx +++ b/packages/pluggableWidgets/color-picker-web/src/components/ColorPicker.tsx @@ -53,16 +53,19 @@ export const ColorPicker = (props: ColorPickerProps): ReactElement => { rgb: "rgb(255,255,255)", rgba: "rgb(255,255,255,1)" }; - const { type, mode, disabled, defaultColors, color, format, invalidFormatMessage } = props; + const { type, mode, disabled, defaultColors, color, format, invalidFormatMessage, onColorChange } = props; const ColorElement = getColorPicker(type); const [hidden, setHidden] = useState(mode !== "inline"); const [currentColor, setCurrentColor] = useState(color); const [alertMessage, setAlertMessage] = useState(); - const submitColor = (color: string): void => { - setCurrentColor(color); - props.onColorChange(color); - }; + const submitColor = useCallback( + (color: string): void => { + setCurrentColor(color); + onColorChange(color); + }, + [onColorChange] + ); const validateColor = (colorValue: string): void => { const message = validateColorFormat(colorValue, format); @@ -86,7 +89,7 @@ export const ColorPicker = (props: ColorPickerProps): ReactElement => { submitColor(finalColor); } }, - [disabled, format] + [disabled, format, submitColor] ); const renderInput = (): ReactElement => {