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:
@@ -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>
|
||||
)}
|
||||
</>
|
||||
);
|
||||
|
||||
Reference in New Issue
Block a user