From 3d601158813fa33a993ec5996f1015969337be7e Mon Sep 17 00:00:00 2001
From: Melanie Seltzer <17421347+melanieseltzer@users.noreply.github.com>
Date: Wed, 22 Jan 2025 10:59:04 -0800
Subject: [PATCH] Prevent `HoverCardContent` click events from bubbling up
 (#395)

* prevent click events from bubbling up

* versioning
---
 packages/mantle/package.json                             | 2 +-
 packages/mantle/src/components/hover-card/hover-card.tsx | 9 ++++++++-
 2 files changed, 9 insertions(+), 2 deletions(-)

diff --git a/packages/mantle/package.json b/packages/mantle/package.json
index 9f4d8d0f..d8bafddb 100644
--- a/packages/mantle/package.json
+++ b/packages/mantle/package.json
@@ -3,7 +3,7 @@
   "description": "mantle is ngrok's UI library and design system.",
   "author": "ngrok",
   "license": "MIT",
-  "version": "0.19.1",
+  "version": "0.19.2",
   "homepage": "https://mantle.ngrok.com",
   "repository": {
     "type": "git",
diff --git a/packages/mantle/src/components/hover-card/hover-card.tsx b/packages/mantle/src/components/hover-card/hover-card.tsx
index b98a9f71..8b19d1a2 100644
--- a/packages/mantle/src/components/hover-card/hover-card.tsx
+++ b/packages/mantle/src/components/hover-card/hover-card.tsx
@@ -27,7 +27,7 @@ const HoverCardPortal = HoverCardPrimitive.Portal;
 const HoverCardContent = forwardRef<
 	ElementRef<typeof HoverCardPrimitive.Content>,
 	ComponentPropsWithoutRef<typeof HoverCardPrimitive.Content>
->(({ className, align = "center", sideOffset = 4, ...props }, ref) => (
+>(({ className, onClick, align = "center", sideOffset = 4, ...props }, ref) => (
 	<HoverCardPortal>
 		<HoverCardPrimitive.Content
 			ref={ref}
@@ -38,6 +38,13 @@ const HoverCardContent = forwardRef<
 				"data-state-open:animate-in data-state-closed:animate-out data-state-closed:fade-out-0 data-state-open:fade-in-0 data-state-closed:zoom-out-95 data-state-open:zoom-in-95 data-side-bottom:slide-in-from-top-2 data-side-left:slide-in-from-right-2 data-side-right:slide-in-from-left-2 data-side-top:slide-in-from-bottom-2",
 				className,
 			)}
+			onClick={(event) => {
+				/**
+				 * Prevent the click event from propagating up to parent/containing elements
+				 */
+				event.stopPropagation();
+				onClick?.(event);
+			}}
 			{...props}
 		/>
 	</HoverCardPortal>