fix(modals): ConfirmModal locks body scroll + respects loading on backdrop
ConfirmModal never called useModalLock, so the page scrolled behind every confirmation dialog (8+ usages). Add the ref-counted scroll lock and guard backdrop-click against the loading state, matching FormModal. Co-Authored-By: Claude Opus 4.8 (1M context) <noreply@anthropic.com>
This commit is contained in:
@@ -1,6 +1,7 @@
|
||||
import { useEffect, type ReactNode } from "react";
|
||||
import { motion, AnimatePresence } from "framer-motion";
|
||||
import useReducedMotion from "../hooks/useReducedMotion";
|
||||
import useModalLock from "../hooks/useModalLock";
|
||||
|
||||
interface ConfirmModalProps {
|
||||
isOpen: boolean;
|
||||
@@ -93,6 +94,8 @@ export default function ConfirmModal({
|
||||
loading,
|
||||
}: ConfirmModalProps) {
|
||||
const reducedMotion = useReducedMotion();
|
||||
// Lock body scroll while open (ref-counted, nesting-safe) — matches FormModal.
|
||||
useModalLock(isOpen);
|
||||
useEffect(() => {
|
||||
if (!isOpen) return;
|
||||
|
||||
@@ -119,7 +122,10 @@ export default function ConfirmModal({
|
||||
exit={{ opacity: 0 }}
|
||||
transition={{ duration: reducedMotion ? 0 : 0.18 }}
|
||||
>
|
||||
<div className="admin-modal-backdrop" onClick={onClose} />
|
||||
<div
|
||||
className="admin-modal-backdrop"
|
||||
onClick={() => !loading && onClose()}
|
||||
/>
|
||||
<motion.div
|
||||
className="admin-modal admin-confirm-modal"
|
||||
role="dialog"
|
||||
|
||||
Reference in New Issue
Block a user