Fix campaign card navigation when clicking inside verify dialog

The campaign card wraps its contents in a react-router <Link>. The
moderation menu's VerificationDialog and CampaignListMembershipDialog
portal their DOM out of the card, but React synthetic events still
bubble through the component tree to the Link — so clicking anywhere
in either dialog navigated to the campaign page. Wrap both dialogs in
a span that stops click/pointerdown propagation, mirroring the guards
already on the dropdown trigger and content.
This commit is contained in:
Alex Gleason
2026-06-12 15:41:41 -05:00
parent c2179fef2b
commit 818afe9bbf
+9 -2
View File
@@ -552,7 +552,14 @@ export function ModerationMenu({ className, ...rest }: ModerationMenuProps) {
</DropdownMenuContent>
</DropdownMenu>
{rest.surface === 'campaign' && (
<>
// The campaign card wraps everything in a <Link>. Radix dialogs portal
// their DOM out of the card, but React synthetic events still bubble
// through the component tree to the Link — so clicks inside the dialog
// would navigate to the campaign page. Stop propagation here.
<span
onClick={(e) => e.stopPropagation()}
onPointerDown={(e) => e.stopPropagation()}
>
<CampaignListMembershipDialog
open={membershipOpen}
onOpenChange={setMembershipOpen}
@@ -566,7 +573,7 @@ export function ModerationMenu({ className, ...rest }: ModerationMenuProps) {
isPending={verify.isPending}
onConfirm={onConfirmVerify}
/>
</>
</span>
)}
</>
);