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

fix(ui): resolve dialog closing issues with Command components

Browse Source 
- Replace custom overlay click handler with proper onInteractOutside
- Add detection for Command components to prevent unwanted closures
- Restore overlay visibility without click handler conflicts
- Separate DialogFooter from scrollable content for proper spacing
- Add border and padding to DialogFooter container for visual separation

Fixes dialogs closing unexpectedly when used inside Command menus.
This commit is contained in:
Jhon
2025-07-13 13:00:21 -03:00
parent fa5994bd47
commit a8fc052cbf
1 changed files with 32 additions and 12 deletions
Download Patch File Download Diff File Expand all files Collapse all files

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

@@ -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 (
<DialogPortal>
<div
className="fixed inset-0 z-50 bg-black/80 data-[state=open]:animate-in data-[state=closed]:animate-out data-[state=closed]:fade-out-0 data-[state=open]:fade-in-0"
onClick={handleOverlayClick}
/>
{/* Custom overlay for modal=false - no click handler to avoid Command conflicts */}
<div className="fixed inset-0 z-50 bg-black/80 data-[state=open]:animate-in data-[state=closed]:animate-out data-[state=closed]:fade-out-0 data-[state=open]:fade-in-0" />
<DialogPrimitive.Content
ref={ref}
className={cn(
@@ -83,12 +91,17 @@ const DialogContent = React.forwardRef<
"flex flex-col max-h-[90vh]",
className,
)}
onPointerDownOutside={(e) => {
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}
</div>
{/* DialogFooter outside scrollable area with proper spacing */}
{dialogFooter && (
<div className="p-6 pt-0 border-t border-border/50">
{dialogFooter}
</div>
)}
<DialogPrimitive.Close className="absolute right-4 top-4 rounded-sm opacity-70 ring-offset-background transition-opacity hover:opacity-100 focus:outline-none focus:ring-2 focus:ring-ring focus:ring-offset-2 disabled:pointer-events-none data-[state=open]:bg-accent data-[state=open]:text-muted-foreground">
<X className="h-4 w-4" />
<span className="sr-only">Close</span>
@@ -132,7 +152,7 @@ const DialogFooter = ({
}: React.HTMLAttributes<HTMLDivElement>) => (
<div
className={cn(
"flex flex-col-reverse sm:flex-row sm:justify-end sm:space-x-2",
"flex flex-col-reverse mt-4 sm:flex-row sm:justify-end sm:space-x-2",
className,
)}
{...props}