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:
@@ -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 */}
|
||||||
|
|||||||
@@ -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"
|
||||||
/>
|
/>
|
||||||
|
|
||||||
|
|||||||
Reference in New Issue
Block a user