diff --git a/CHANGELOG.md b/CHANGELOG.md
index f2055f37..eaa2cf0a 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`
+- ``
+ - `preventEvents` property: Prevents events related to button clicks from bubbling up. Make this by default true in ``
### Fixed
diff --git a/src/components/Card/CardActions.tsx b/src/components/Card/CardActions.tsx
index 049881f4..33fcace9 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 {
* 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 = Object.create(null)
+ if (preventEvents) {
+ htmlElementProps = {
+ onPointerDown: stopEvent,
+ onMouseDown: stopEvent,
+ onPointerUp: stopEvent,
+ onMouseUp: stopEvent,
+ onClick: stopEvent
+ }
+ }
return (