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

fix(ui): resolve dialog infinite render loops with tall content

Browse Source 
- Force modal=false on all dialogs to prevent Radix UI render loops
- Add React context to share dialog state between components
- Implement custom overlay with proper click-to-close behavior
- Add body scroll lock tied to dialog open state (prevents stuck scroll)
- Create scrollable content wrapper with overscroll-contain
- Remove complex wheel event handlers that caused tab hangs
- Simplify dialog architecture for better maintainability
This commit is contained in:
Jhon
2025-07-13 11:36:10 -03:00
parent d87205c4dc
commit c03b9509c8
1 changed files with 83 additions and 22 deletions
Download Patch File Download Diff File Expand all files Collapse all files

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

@@ -1,10 +1,19 @@
import * as DialogPrimitive from "@radix-ui/react-dialog";
import { X } from "lucide-react";
import * as React from "react";
import { cn } from "@/lib/utils";
const Dialog = DialogPrimitive.Root;
const DialogContext = React.createContext<{
onOpenChange?: (open: boolean) => void;
open?: boolean;
}>({});
const Dialog = ({ onOpenChange, open, ...props }: React.ComponentPropsWithoutRef<typeof DialogPrimitive.Root>) => (
<DialogContext.Provider value={{ onOpenChange, open }}>
<DialogPrimitive.Root open={open} onOpenChange={onOpenChange} {...props} modal={false}/>
</DialogContext.Provider>
);
Dialog.displayName = DialogPrimitive.Root.displayName;
const DialogTrigger = DialogPrimitive.Trigger;
@@ -30,25 +39,77 @@ DialogOverlay.displayName = DialogPrimitive.Overlay.displayName;
const DialogContent = React.forwardRef<
React.ElementRef<typeof DialogPrimitive.Content>,
React.ComponentPropsWithoutRef<typeof DialogPrimitive.Content>
>(({ className, children, ...props }, ref) => (
<DialogPortal>
<DialogOverlay />
<DialogPrimitive.Content
ref={ref}
className={cn(
"fixed left-[50%] top-[50%] z-50 w-full max-w-lg translate-x-[-50%] translate-y-[-50%] border bg-background p-6 shadow-lg duration-200 data-[state=open]:animate-in data-[state=closed]:animate-out data-[state=closed]:fade-out-0 data-[state=open]:fade-in-0 data-[state=closed]:zoom-out-95 data-[state=open]:zoom-in-95 data-[state=closed]:slide-out-to-left-1/2 data-[state=closed]:slide-out-to-top-[48%] data-[state=open]:slide-in-from-left-1/2 data-[state=open]:slide-in-from-top-[48%] sm:rounded-lg",
className,
)}
{...props}
>
<div className="space-y-4 w-full">{children}</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>
</DialogPrimitive.Close>
</DialogPrimitive.Content>
</DialogPortal>
));
>(({ className, children, ...props }, ref) => {
const contentRef = React.useRef<HTMLDivElement>(null);
const { onOpenChange, open } = React.useContext(DialogContext);
React.useEffect(() => {
if (!open) return;
const scrollbarWidth = window.innerWidth - document.documentElement.clientWidth;
const body = document.body;
const originalPaddingRight = body.style.paddingRight;
const originalOverflow = body.style.overflow;
body.style.overflow = 'hidden';
if (scrollbarWidth > 0) {
body.style.paddingRight = `${scrollbarWidth}px`;
}
return () => {
body.style.overflow = originalOverflow;
body.style.paddingRight = originalPaddingRight;
};
}, [open]);
const handleOverlayClick = React.useCallback((e: React.MouseEvent) => {
if (e.target === e.currentTarget && onOpenChange) {
onOpenChange(false);
}
}, [onOpenChange]);
const hasPaddingOverride = className?.includes("p-0");
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}
/>
<DialogPrimitive.Content
ref={ref}
className={cn(
"fixed left-[50%] top-[50%] z-50 w-full max-w-lg translate-x-[-50%] translate-y-[-50%] border bg-background shadow-lg duration-200 data-[state=open]:animate-in data-[state=closed]:animate-out data-[state=closed]:fade-out-0 data-[state=open]:fade-in-0 data-[state=closed]:zoom-out-95 data-[state=open]:zoom-in-95 data-[state=closed]:slide-out-to-left-1/2 data-[state=closed]:slide-out-to-top-[48%] data-[state=open]:slide-in-from-left-1/2 data-[state=open]:slide-in-from-top-[48%] sm:rounded-lg",
"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]')) {
e.preventDefault();
}
}}
{...props}
>
<div
ref={contentRef}
className={cn(
"overflow-y-auto overflow-x-hidden flex-1 min-h-0 overscroll-contain",
!hasPaddingOverride && "p-6"
)}
>
{children}
</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>
</DialogPrimitive.Close>
</DialogPrimitive.Content>
</DialogPortal>
);
});
DialogContent.displayName = DialogPrimitive.Content.displayName;
const DialogHeader = ({
@@ -117,4 +178,4 @@ export {
DialogFooter,
DialogTitle,
DialogDescription,
};
};