fix(ui-color-picker): prevent selection outside of ColorMixer when dragging the indicator

INSTUI-4698

Author: ToMESSKa

packages/ui-color-picker/src/ColorMixer/ColorPalette/index.tsx

@@ -120,6 +120,14 @@ class ColorPalette extends Component<ColorPaletteProps, ColorPaletteState> {
   }
 
   handlePaletteMouseDown(e: React.MouseEvent<ViewOwnProps, 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(

packages/ui-color-picker/src/ColorMixer/Slider/index.tsx

@@ -104,6 +104,14 @@ class Slider extends Component<SliderProps> {
   }
 
   handleMouseDown(e: React.MouseEvent<ViewOwnProps, 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(