From ccf1ddf2fd131f9f9e0ee3f8ab9d47c46c0479cc Mon Sep 17 00:00:00 2001
From: Carlos Valente <carlosvalente@pm.me>
Date: Sun, 5 Oct 2025 07:28:06 +0200
Subject: [PATCH] fix: conflict between swatch picker and swatch elements

---
 .../common/components/input/colour-input/Swatch.tsx    | 10 ++++++----
 1 file changed, 6 insertions(+), 4 deletions(-)

diff --git a/apps/client/src/common/components/input/colour-input/Swatch.tsx b/apps/client/src/common/components/input/colour-input/Swatch.tsx
index f31991eed..8691bc29a 100644
--- a/apps/client/src/common/components/input/colour-input/Swatch.tsx
+++ b/apps/client/src/common/components/input/colour-input/Swatch.tsx
@@ -1,3 +1,4 @@
+import { MouseEvent } from 'react';
 import { IoBan } from 'react-icons/io5';
 
 import { cx } from '../../../utils/styleUtils';
@@ -10,12 +11,13 @@ interface SwatchProps {
   isSelected?: boolean;
 }
 
-export default function Swatch(props: SwatchProps) {
-  const { color, isSelected, onClick } = props;
-
-  const handleClick = () => {
+export default function Swatch({ color, isSelected, onClick }: SwatchProps) {
+  const handleClick = (event: MouseEvent) => {
     onClick?.(color);
+    event.preventDefault();
+    event.stopPropagation();
   };
+
   const classes = cx([style.swatch, isSelected && style.selected, onClick && style.selectable]);
 
   if (!color) {