From e0d39c86efdfb4e51bcf3c8e046a03cfae199501 Mon Sep 17 00:00:00 2001
From: Arnaud <anelissen@solem.fr>
Date: Fri, 10 Jul 2026 16:09:06 +0200
Subject: [PATCH] fix: clicking the favorite button on recipe cards still
 navigated to the recipe
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

stopPropagation() alone doesn't cancel a Link's native anchor navigation —
that's the browser's default action for the click reaching the <a>, not
a bubbling JS handler propagation can block. Needed preventDefault() too.

Co-Authored-By: Claude Sonnet 5 <noreply@anthropic.com>
---
 apps/web/components/recipe/recipes-grid.tsx | 5 ++++-
 1 file changed, 4 insertions(+), 1 deletion(-)

diff --git a/apps/web/components/recipe/recipes-grid.tsx b/apps/web/components/recipe/recipes-grid.tsx
index e371a58..5999798 100644
--- a/apps/web/components/recipe/recipes-grid.tsx
+++ b/apps/web/components/recipe/recipes-grid.tsx
@@ -49,7 +49,10 @@ type Recipe = {
 
 /** Stops the click from bubbling to the card's own Link/select handler. */
 function StopPropagation({ children }: { children: React.ReactNode }) {
-  return <div onClick={(e) => e.stopPropagation()}>{children}</div>;
+  // preventDefault is required too — stopPropagation alone doesn't stop the ancestor
+  // Link's native anchor navigation, since that's the browser's default action for the
+  // click event reaching the <a>, not a bubbling JS handler stopPropagation can block.
+  return <div onClick={(e) => { e.preventDefault(); e.stopPropagation(); }}>{children}</div>;
 }
 
 type ViewMode = "grid" | "list" | "compact";