diff --git a/packages/ui/src/color-picker/color-picker.tsx b/packages/ui/src/color-picker/color-picker.tsx
index 73616a992d7..e53fdc10df9 100644
--- a/packages/ui/src/color-picker/color-picker.tsx
+++ b/packages/ui/src/color-picker/color-picker.tsx
@@ -12,7 +12,9 @@ export const ColorPicker: React.FC<ColorPickerProps> = (props) => {
   const inputRef = React.useRef<HTMLInputElement>(null);
 
   // handlers
-  const handleOnClick = () => {
+  const handleOnClick = (e: React.MouseEvent<HTMLButtonElement>) => {
+    e.stopPropagation();
+    e.preventDefault();
     inputRef.current?.click();
   };