From 9cbd13042de41528945897d03c46976abb76deb3 Mon Sep 17 00:00:00 2001
From: Helder Oliveira <helder.oliveira@clickhouse.com>
Date: Wed, 15 Apr 2026 14:34:46 +0100
Subject: [PATCH 1/8] =?UTF-8?q?fix:=20=F0=9F=90=9B=20Fix=20CardHorizontal?=
 =?UTF-8?q?=20double=20onClick=20handler=20bug?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

The inner Button component was using the same handleClick handler as the
parent Wrapper, causing event bubbling that invoked onButtonClick and
window.open(infoUrl) twice when the button was clicked.

Added a new handleButtonClick wrapper that calls e.stopPropagation()
before invoking the main handleClick, preventing the event from bubbling
to the parent Wrapper.

Fixes the bug reported in CardHorizontal.tsx:285
---
 src/components/CardHorizontal/CardHorizontal.tsx | 7 ++++++-
 1 file changed, 6 insertions(+), 1 deletion(-)

diff --git a/src/components/CardHorizontal/CardHorizontal.tsx b/src/components/CardHorizontal/CardHorizontal.tsx
index d00628c61..4d7283390 100644
--- a/src/components/CardHorizontal/CardHorizontal.tsx
+++ b/src/components/CardHorizontal/CardHorizontal.tsx
@@ -208,6 +208,11 @@ export const CardHorizontal = ({
       window.open(infoUrl, '_blank');
     }
   };
+
+  const onClickButtonHandler = (e: React.MouseEvent<HTMLElement>) => {
+    e.stopPropagation();
+    handleClick(e);
+  };
   return (
     <Wrapper
       $disabled={disabled}
@@ -280,7 +285,7 @@ export const CardHorizontal = ({
           >
             <Button
               label={infoText}
-              onClick={handleClick}
+              onClick={onClickButtonHandler}
               disabled={disabled}
               fillWidth
             />

From 49f5d614d6afbdf449e5b112c32d635f90a3f314 Mon Sep 17 00:00:00 2001
From: Helder Oliveira <helder.oliveira@clickhouse.com>
Date: Wed, 15 Apr 2026 14:40:56 +0100
Subject: [PATCH 2/8] =?UTF-8?q?chore:=20=F0=9F=A4=96=20Add=20changeset=20f?=
 =?UTF-8?q?or=20CardHorizontal=20fix?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 .changeset/fix-card-horizontal-double-click.md | 5 +++++
 1 file changed, 5 insertions(+)
 create mode 100644 .changeset/fix-card-horizontal-double-click.md

diff --git a/.changeset/fix-card-horizontal-double-click.md b/.changeset/fix-card-horizontal-double-click.md
new file mode 100644
index 000000000..6d7b8ac87
--- /dev/null
+++ b/.changeset/fix-card-horizontal-double-click.md
@@ -0,0 +1,5 @@
+---
+"@clickhouse/click-ui": patch
+---
+
+Fix CardHorizontal double onClick handler bug where clicking the inner Button would invoke onButtonClick and window.open(infoUrl) twice due to event bubbling. Added e.stopPropagation() to the button's click handler.

From 2c9083ae5be02096f5ed24fba980538c14bfcb6e Mon Sep 17 00:00:00 2001
From: Helder Oliveira <helder.oliveira@clickhouse.com>
Date: Wed, 15 Apr 2026 14:42:14 +0100
Subject: [PATCH 3/8] =?UTF-8?q?chore:=20=F0=9F=A4=96=20update=20changeset?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 .changeset/fix-card-horizontal-double-click.md | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/.changeset/fix-card-horizontal-double-click.md b/.changeset/fix-card-horizontal-double-click.md
index 6d7b8ac87..bb03227a2 100644
--- a/.changeset/fix-card-horizontal-double-click.md
+++ b/.changeset/fix-card-horizontal-double-click.md
@@ -2,4 +2,4 @@
 "@clickhouse/click-ui": patch
 ---
 
-Fix CardHorizontal double onClick handler bug where clicking the inner Button would invoke onButtonClick and window.open(infoUrl) twice due to event bubbling. Added e.stopPropagation() to the button's click handler.
+Fix `CardHorizontal` double `onClick` handler bug where clicking the inner Button would invoke `onButtonClick` and window.open(infoUrl) twice due to event bubbling. Added e.stopPropagation() to the button's click handler.

From a5b5edb5629f954164cf5705aa8c92e4224cc102 Mon Sep 17 00:00:00 2001
From: Helder Oliveira <helder.oliveira@clickhouse.com>
Date: Wed, 15 Apr 2026 14:53:38 +0100
Subject: [PATCH 4/8] =?UTF-8?q?test(CardHorizontal):=20=F0=9F=92=8D=20Add?=
 =?UTF-8?q?=20test=20for=20button=20click=20event=20bubbling=20bug?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 .../CardHorizontal/CardHorizontal.test.tsx         | 14 ++++++++++++++
 1 file changed, 14 insertions(+)

diff --git a/src/components/CardHorizontal/CardHorizontal.test.tsx b/src/components/CardHorizontal/CardHorizontal.test.tsx
index 38f14a619..f4043796d 100644
--- a/src/components/CardHorizontal/CardHorizontal.test.tsx
+++ b/src/components/CardHorizontal/CardHorizontal.test.tsx
@@ -1,4 +1,5 @@
 import { screen } from '@testing-library/react';
+import userEvent from '@testing-library/user-event';
 import { CardHorizontal, CardHorizontalProps } from '@/components/CardHorizontal';
 import { renderCUI } from '@/utils/test-utils';
 
@@ -187,4 +188,17 @@ describe('CardHorizontal Component', () => {
     expect(windowOpenSpy).not.toHaveBeenCalled();
     windowOpenSpy.mockRestore();
   });
+
+  it('should call onButtonClick only once when inner button is clicked', async () => {
+    const onButtonClick = vitest.fn();
+    const { getByRole } = renderCard({
+      title: 'Test Card',
+      infoText: 'Click me',
+      onButtonClick,
+    });
+
+    await userEvent.click(getByRole('button'));
+
+    expect(onButtonClick).toHaveBeenCalledTimes(1);
+  });
 });

From 82ce6f8e4a4a9f04fb6861fe98294da20af61bf9 Mon Sep 17 00:00:00 2001
From: Helder Oliveira <helder.oliveira@clickhouse.com>
Date: Wed, 15 Apr 2026 14:54:09 +0100
Subject: [PATCH 5/8] =?UTF-8?q?refactor(CardHorizontal):=20=F0=9F=92=A1=20?=
 =?UTF-8?q?Rename=20onClickButtonHandler=20to=20handleButtonClick?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 src/components/CardHorizontal/CardHorizontal.tsx | 4 ++--
 1 file changed, 2 insertions(+), 2 deletions(-)

diff --git a/src/components/CardHorizontal/CardHorizontal.tsx b/src/components/CardHorizontal/CardHorizontal.tsx
index 4d7283390..6cc4f266d 100644
--- a/src/components/CardHorizontal/CardHorizontal.tsx
+++ b/src/components/CardHorizontal/CardHorizontal.tsx
@@ -209,7 +209,7 @@ export const CardHorizontal = ({
     }
   };
 
-  const onClickButtonHandler = (e: React.MouseEvent<HTMLElement>) => {
+  const handleButtonClick = (e: React.MouseEvent<HTMLElement>) => {
     e.stopPropagation();
     handleClick(e);
   };
@@ -285,7 +285,7 @@ export const CardHorizontal = ({
           >
             <Button
               label={infoText}
-              onClick={onClickButtonHandler}
+              onClick={handleButtonClick}
               disabled={disabled}
               fillWidth
             />

From 69304442cce7ea3b363ec64638d8be6304cbf26a Mon Sep 17 00:00:00 2001
From: Helder Oliveira <helder.oliveira@clickhouse.com>
Date: Wed, 15 Apr 2026 14:57:49 +0100
Subject: [PATCH 6/8] =?UTF-8?q?perf(CardHorizontal):=20=E2=9A=A1=EF=B8=8F?=
 =?UTF-8?q?=20Memoize=20handlers=20with=20useCallback=20for=20referential?=
 =?UTF-8?q?=20stability?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 .../CardHorizontal/CardHorizontal.tsx         | 39 +++++++++++--------
 1 file changed, 23 insertions(+), 16 deletions(-)

diff --git a/src/components/CardHorizontal/CardHorizontal.tsx b/src/components/CardHorizontal/CardHorizontal.tsx
index 6cc4f266d..db6d4c1cc 100644
--- a/src/components/CardHorizontal/CardHorizontal.tsx
+++ b/src/components/CardHorizontal/CardHorizontal.tsx
@@ -1,3 +1,4 @@
+import { useCallback } from 'react';
 import { styled } from 'styled-components';
 import { Badge } from '@/components/Badge';
 import { Button } from '@/components/Button';
@@ -195,24 +196,30 @@ export const CardHorizontal = ({
   onButtonClick,
   ...props
 }: CardHorizontalProps) => {
-  const handleClick = (e: React.MouseEvent<HTMLElement>) => {
-    if (disabled) {
-      e.preventDefault();
-      return;
-    }
+  const handleClick = useCallback(
+    (e: React.MouseEvent<HTMLElement>) => {
+      if (disabled) {
+        e.preventDefault();
+        return;
+      }
 
-    if (typeof onButtonClick === 'function') {
-      onButtonClick(e);
-    }
-    if (infoUrl && infoUrl.length > 0) {
-      window.open(infoUrl, '_blank');
-    }
-  };
+      if (typeof onButtonClick === 'function') {
+        onButtonClick(e);
+      }
+      if (infoUrl && infoUrl.length > 0) {
+        window.open(infoUrl, '_blank');
+      }
+    },
+    [disabled, onButtonClick, infoUrl]
+  );
 
-  const handleButtonClick = (e: React.MouseEvent<HTMLElement>) => {
-    e.stopPropagation();
-    handleClick(e);
-  };
+  const handleButtonClick = useCallback(
+    (e: React.MouseEvent<HTMLElement>) => {
+      e.stopPropagation();
+      handleClick(e);
+    },
+    [handleClick]
+  );
   return (
     <Wrapper
       $disabled={disabled}

From 9f6786802afd8bf2940cd92fc3a83968ff5c1da6 Mon Sep 17 00:00:00 2001
From: Helder Oliveira <helder.oliveira@clickhouse.com>
Date: Wed, 15 Apr 2026 15:50:36 +0100
Subject: [PATCH 7/8] =?UTF-8?q?test(CardHorizontal):=20=F0=9F=92=8D=20Add?=
 =?UTF-8?q?=20test=20for=20window.open=20call=20count?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 .../CardHorizontal/CardHorizontal.test.tsx         | 14 ++++++++++++++
 1 file changed, 14 insertions(+)

diff --git a/src/components/CardHorizontal/CardHorizontal.test.tsx b/src/components/CardHorizontal/CardHorizontal.test.tsx
index f4043796d..3c394ce08 100644
--- a/src/components/CardHorizontal/CardHorizontal.test.tsx
+++ b/src/components/CardHorizontal/CardHorizontal.test.tsx
@@ -201,4 +201,18 @@ describe('CardHorizontal Component', () => {
 
     expect(onButtonClick).toHaveBeenCalledTimes(1);
   });
+
+  it('should open infoUrl only once when inner button is clicked', async () => {
+    const windowOpenSpy = vitest.spyOn(window, 'open').mockImplementation(() => null);
+    const { getByRole } = renderCard({
+      title: 'Test Card',
+      infoText: 'Click me',
+      infoUrl: 'https://example.com',
+    });
+
+    await userEvent.click(getByRole('button'));
+
+    expect(windowOpenSpy).toHaveBeenCalledTimes(1);
+    windowOpenSpy.mockRestore();
+  });
 });

From a1df536ae794e9af766523d5f88837e7b60217ad Mon Sep 17 00:00:00 2001
From: Helder Oliveira <helder.oliveira@clickhouse.com>
Date: Wed, 15 Apr 2026 15:52:50 +0100
Subject: [PATCH 8/8] =?UTF-8?q?refactor:=20=F0=9F=92=A1=20prefer=20importi?=
 =?UTF-8?q?ng=20event=20type=20instead=20using=20React?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 src/components/CardHorizontal/CardHorizontal.tsx | 6 +++---
 1 file changed, 3 insertions(+), 3 deletions(-)

diff --git a/src/components/CardHorizontal/CardHorizontal.tsx b/src/components/CardHorizontal/CardHorizontal.tsx
index db6d4c1cc..8dca9ff54 100644
--- a/src/components/CardHorizontal/CardHorizontal.tsx
+++ b/src/components/CardHorizontal/CardHorizontal.tsx
@@ -1,4 +1,4 @@
-import { useCallback } from 'react';
+import { useCallback, type MouseEvent } from 'react';
 import { styled } from 'styled-components';
 import { Badge } from '@/components/Badge';
 import { Button } from '@/components/Button';
@@ -197,7 +197,7 @@ export const CardHorizontal = ({
   ...props
 }: CardHorizontalProps) => {
   const handleClick = useCallback(
-    (e: React.MouseEvent<HTMLElement>) => {
+    (e: MouseEvent<HTMLElement>) => {
       if (disabled) {
         e.preventDefault();
         return;
@@ -214,7 +214,7 @@ export const CardHorizontal = ({
   );
 
   const handleButtonClick = useCallback(
-    (e: React.MouseEvent<HTMLElement>) => {
+    (e: MouseEvent<HTMLElement>) => {
       e.stopPropagation();
       handleClick(e);
     },