From 6b7f41abb3c7d8c6b5231345bb110de99c7115ed Mon Sep 17 00:00:00 2001
From: Andreas Schultz <as.c@mailbox.org>
Date: Tue, 24 Mar 2026 18:01:31 +0100
Subject: [PATCH] Fix event bubbling of card actions in SimpleDialog

---
 CHANGELOG.md                           |  2 ++
 src/components/Card/CardActions.tsx    | 21 ++++++++++++++++++++-
 src/components/Dialog/SimpleDialog.tsx |  1 +
 3 files changed, 23 insertions(+), 1 deletion(-)

diff --git a/CHANGELOG.md b/CHANGELOG.md
index f2055f378..eaa2cf0a5 100644
--- a/CHANGELOG.md
+++ b/CHANGELOG.md
@@ -33,6 +33,8 @@ The format is based on [Keep a Changelog](http://keepachangelog.com/) and this p
 -   new icons:
     -   `state-confirmed-all`
     -   `state-declined-all`
+-   `<CardActions />`
+    -   `preventEvents` property: Prevents events related to button clicks from bubbling up. Make this by default true in `<SimpleDialog />`
 
 ### Fixed
 
diff --git a/src/components/Card/CardActions.tsx b/src/components/Card/CardActions.tsx
index 049881f43..33fcace9d 100644
--- a/src/components/Card/CardActions.tsx
+++ b/src/components/Card/CardActions.tsx
@@ -1,4 +1,4 @@
-import React from "react";
+import React, {DOMAttributes} from "react";
 
 import { CLASSPREFIX as eccgui } from "../../configuration/constants";
 
@@ -12,6 +12,13 @@ export interface CardActionsProps extends React.HTMLAttributes<HTMLDivElement> {
      * Set footer to display its children on only one line.
      */
     noWrap?: boolean;
+
+    /** Prevents all events related to button clicks from bubbling further up. */
+    preventEvents?: boolean;
+}
+
+const stopEvent = (event: React.SyntheticEvent) => {
+    event.stopPropagation()
 }
 
 /**
@@ -23,10 +30,22 @@ export const CardActions = ({
     className = "",
     inverseDirection = false,
     noWrap = false,
+    preventEvents = false,
     ...otherProps
 }: CardActionsProps) => {
+    let htmlElementProps: DOMAttributes<HTMLElement> = Object.create(null)
+    if (preventEvents) {
+        htmlElementProps = {
+            onPointerDown: stopEvent,
+            onMouseDown: stopEvent,
+            onPointerUp: stopEvent,
+            onMouseUp: stopEvent,
+            onClick: stopEvent
+        }
+    }
     return (
         <footer
+            {...htmlElementProps}
             {...otherProps}
             className={
                 `${eccgui}-card__actions` +
diff --git a/src/components/Dialog/SimpleDialog.tsx b/src/components/Dialog/SimpleDialog.tsx
index 8e910c3d5..3e65b2cdb 100644
--- a/src/components/Dialog/SimpleDialog.tsx
+++ b/src/components/Dialog/SimpleDialog.tsx
@@ -116,6 +116,7 @@ export const SimpleDialog = ({
                 )}
                 {actions && (
                     <CardActions
+                        preventEvents={true}
                         {...actionsProps}
                         inverseDirection
                         className={`${actionsProps?.className ?? ""} ${intentClassName}`}