fix: clicking the favorite button on recipe cards still navigated to the recipe
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>
This commit is contained in:
@@ -49,7 +49,10 @@ type Recipe = {
|
|||||||
|
|
||||||
/** Stops the click from bubbling to the card's own Link/select handler. */
|
/** Stops the click from bubbling to the card's own Link/select handler. */
|
||||||
function StopPropagation({ children }: { children: React.ReactNode }) {
|
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";
|
type ViewMode = "grid" | "list" | "compact";
|
||||||
|
|||||||
Reference in New Issue
Block a user