feat(ux): prevent wizard close on backdrop click

AnimatedModal: add disableBackdropClose prop (default false, no impact
on existing consumers). When true, overlay onClick is removed.

ProjectWizard: remove handleBackdropClick — backdrop click no longer
closes the wizard. Only the X button and Cancel close it.

EstimateWizard already had no backdrop-click handler; no change needed.

Co-Authored-By: Claude Sonnet 4.6 <noreply@anthropic.com>
This commit is contained in:
2026-04-07 16:09:22 +02:00
parent 4accee95a4
commit b103e79e92
2 changed files with 3 additions and 6 deletions
@@ -1478,14 +1478,9 @@ export function ProjectWizard({ open, onClose, onSuccess }: ProjectWizardProps)
if (!open) return null; if (!open) return null;
function handleBackdropClick(e: React.MouseEvent<HTMLDivElement>) {
if (e.target === e.currentTarget) handleClose();
}
return ( return (
<div <div
className="fixed inset-0 bg-black/50 z-50 flex items-start justify-center overflow-y-auto py-8 px-4" className="fixed inset-0 bg-black/50 z-50 flex items-start justify-center overflow-y-auto py-8 px-4"
onClick={handleBackdropClick}
> >
<div className="bg-white rounded-xl shadow-2xl w-full max-w-2xl relative"> <div className="bg-white rounded-xl shadow-2xl w-full max-w-2xl relative">
{/* Celebration effects */} {/* Celebration effects */}
+3 -1
View File
@@ -10,6 +10,7 @@ interface AnimatedModalProps {
className?: string; className?: string;
overlayClassName?: string; overlayClassName?: string;
maxWidth?: string; maxWidth?: string;
disableBackdropClose?: boolean;
} }
export function AnimatedModal({ export function AnimatedModal({
@@ -19,6 +20,7 @@ export function AnimatedModal({
className, className,
overlayClassName, overlayClassName,
maxWidth = "max-w-xl", maxWidth = "max-w-xl",
disableBackdropClose = false,
}: AnimatedModalProps) { }: AnimatedModalProps) {
const panelRef = useRef<HTMLDivElement>(null); const panelRef = useRef<HTMLDivElement>(null);
@@ -49,7 +51,7 @@ export function AnimatedModal({
overlayClassName ?? overlayClassName ??
"absolute inset-0 bg-black/40 backdrop-blur-sm" "absolute inset-0 bg-black/40 backdrop-blur-sm"
} }
onClick={onClose} onClick={disableBackdropClose ? undefined : onClose}
aria-hidden="true" aria-hidden="true"
/> />