Dokploy/dokploy
1
0
Fork 0
mirror of https://github.com/Dokploy/dokploy.git synced 2026-06-16 04:35:24 +02:00
Code Issues Packages Projects Releases Wiki Activity

fix(dialog-ux): prevent default Radix double event onInteractOutside

Browse Source
This commit is contained in:
Vyacheslav Scherbinin
2025-08-13 12:51:44 +07:00
parent 66e6b56053
commit 6e069154ef
1 changed files with 19 additions and 16 deletions
Download Patch File Download Diff File Expand all files Collapse all files

35
apps/dokploy/components/ui/dialog.tsx
View File

@@ -73,8 +73,21 @@ const DialogContent = React.forwardRef<
// Handle outside interactions properly with Command components
const handleInteractOutside = React.useCallback(
(_e: Event) => {
(event: Event | React.MouseEvent) => {
// Don't close when clicking inside popovers, dropdowns, or command components
const target = event.target as HTMLElement;
if (
target.closest("[data-radix-popper-content-wrapper]") ||
target.closest("[cmdk-root]") ||
target.closest("[data-radix-command-root]")
) {
event.preventDefault();
return;
}
if (onOpenChange) {
event.preventDefault();
event.stopPropagation();
onOpenChange(false);
}
},
@@ -95,7 +108,10 @@ const DialogContent = React.forwardRef<
return (
<DialogPortal>
{/* Custom overlay for modal=false - no click handler to avoid Command conflicts */}
<div className="fixed inset-0 z-50 bg-black/80 pointer-events-auto data-[state=open]:animate-in data-[state=closed]:animate-out data-[state=closed]:fade-out-0 data-[state=open]:fade-in-0" />
<div
className="fixed inset-0 z-50 bg-black/80 pointer-events-auto data-[state=open]:animate-in data-[state=closed]:animate-out data-[state=closed]:fade-out-0 data-[state=open]:fade-in-0"
onClick={handleInteractOutside}
/>
<DialogPrimitive.Content
ref={ref}
className={cn(
@@ -103,20 +119,7 @@ const DialogContent = React.forwardRef<
"flex flex-col max-h-[90vh]",
className,
)}
onInteractOutside={(e) => {
const target = e.target as HTMLElement;
// Don't close when clicking inside popovers, dropdowns, or command components
if (
target.closest("[data-radix-popper-content-wrapper]") ||
target.closest("[cmdk-root]") ||
target.closest("[data-radix-command-root]")
) {
e.preventDefault();
return;
}
// Use our custom handler for modal=false behavior
handleInteractOutside(e);
}}
onInteractOutside={(event) => event.preventDefault()}
{...props}
>
<div