From 7b27207c2bd81880283df69f1fe3105935fcddd1 Mon Sep 17 00:00:00 2001 From: Tamas Kovacs Date: Tue, 16 Sep 2025 16:43:23 +0200 Subject: [PATCH] fix(ui-color-picker): prevent selection outside of ColorMixer when dragging the indicator INSTUI-4698 --- .../ui-color-picker/src/ColorMixer/ColorPalette/index.tsx | 8 ++++++++ packages/ui-color-picker/src/ColorMixer/Slider/index.tsx | 8 ++++++++ 2 files changed, 16 insertions(+) diff --git a/packages/ui-color-picker/src/ColorMixer/ColorPalette/index.tsx b/packages/ui-color-picker/src/ColorMixer/ColorPalette/index.tsx index 4b629db018..1dd050bd4a 100644 --- a/packages/ui-color-picker/src/ColorMixer/ColorPalette/index.tsx +++ b/packages/ui-color-picker/src/ColorMixer/ColorPalette/index.tsx @@ -120,6 +120,14 @@ class ColorPalette extends Component { } handlePaletteMouseDown(e: React.MouseEvent) { + // Prevent selection outside palette during dragging the indicator + e.preventDefault() + + // Restore focus since preventDefault() blocks automatic focus on mouse event + if (e.currentTarget instanceof HTMLElement) { + e.currentTarget.focus() + } + this.handleChange(e) this._mouseMoveListener = addEventListener( diff --git a/packages/ui-color-picker/src/ColorMixer/Slider/index.tsx b/packages/ui-color-picker/src/ColorMixer/Slider/index.tsx index 11bd53a250..0bd7edd935 100644 --- a/packages/ui-color-picker/src/ColorMixer/Slider/index.tsx +++ b/packages/ui-color-picker/src/ColorMixer/Slider/index.tsx @@ -104,6 +104,14 @@ class Slider extends Component { } handleMouseDown(e: React.MouseEvent) { + // Prevent selection outside palette during dragging the indicator + e.preventDefault() + + // Restore focus since preventDefault() blocks automatic focus on mouse event + if (e.currentTarget instanceof HTMLElement) { + e.currentTarget.focus() + } + this.handleChange(e) this._mouseMoveListener = addEventListener(