diff --git a/apps/dokploy/components/ui/dialog.tsx b/apps/dokploy/components/ui/dialog.tsx index 8ed1520ed..52bbe9790 100644 --- a/apps/dokploy/components/ui/dialog.tsx +++ b/apps/dokploy/components/ui/dialog.tsx @@ -62,20 +62,28 @@ const DialogContent = React.forwardRef< }; }, [open]); - const handleOverlayClick = React.useCallback((e: React.MouseEvent) => { - if (e.target === e.currentTarget && onOpenChange) { + // Handle outside interactions properly with Command components + const handleInteractOutside = React.useCallback((e: Event) => { + if (onOpenChange) { onOpenChange(false); } }, [onOpenChange]); const hasPaddingOverride = className?.includes("p-0"); + // Separate DialogFooter from other children for proper layout + const childrenArray = React.Children.toArray(children); + const dialogFooter = childrenArray.find((child) => + React.isValidElement(child) && child.type === DialogFooter + ); + const otherChildren = childrenArray.filter((child) => + !(React.isValidElement(child) && child.type === DialogFooter) + ); + return ( -
+ {/* Custom overlay for modal=false - no click handler to avoid Command conflicts */} +
{ - const originalEvent = e.detail.originalEvent; - const target = originalEvent.target as HTMLElement; - if (target.closest('[data-radix-popper-content-wrapper]')) { + 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); }} {...props} > @@ -99,9 +112,16 @@ const DialogContent = React.forwardRef< !hasPaddingOverride && "p-6" )} > - {children} + {otherChildren}
+ {/* DialogFooter outside scrollable area with proper spacing */} + {dialogFooter && ( +
+ {dialogFooter} +
+ )} + Close @@ -132,7 +152,7 @@ const DialogFooter = ({ }: React.HTMLAttributes) => (