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 { useEffect, type ReactNode } from "react";
|
||||||
import { motion, AnimatePresence } from "framer-motion";
|
import { motion, AnimatePresence } from "framer-motion";
|
||||||
import useReducedMotion from "../hooks/useReducedMotion";
|
import useReducedMotion from "../hooks/useReducedMotion";
|
||||||
|
import useModalLock from "../hooks/useModalLock";
|
||||||
|
|
||||||
interface ConfirmModalProps {
|
interface ConfirmModalProps {
|
||||||
isOpen: boolean;
|
isOpen: boolean;
|
||||||
@@ -93,6 +94,8 @@ export default function ConfirmModal({
|
|||||||
loading,
|
loading,
|
||||||
}: ConfirmModalProps) {
|
}: ConfirmModalProps) {
|
||||||
const reducedMotion = useReducedMotion();
|
const reducedMotion = useReducedMotion();
|
||||||
|
// Lock body scroll while open (ref-counted, nesting-safe) — matches FormModal.
|
||||||
|
useModalLock(isOpen);
|
||||||
useEffect(() => {
|
useEffect(() => {
|
||||||
if (!isOpen) return;
|
if (!isOpen) return;
|
||||||
|
|
||||||
@@ -119,7 +122,10 @@ export default function ConfirmModal({
|
|||||||
exit={{ opacity: 0 }}
|
exit={{ opacity: 0 }}
|
||||||
transition={{ duration: reducedMotion ? 0 : 0.18 }}
|
transition={{ duration: reducedMotion ? 0 : 0.18 }}
|
||||||
>
|
>
|
||||||
<div className="admin-modal-backdrop" onClick={onClose} />
|
<div
|
||||||
|
className="admin-modal-backdrop"
|
||||||
|
onClick={() => !loading && onClose()}
|
||||||
|
/>
|
||||||
<motion.div
|
<motion.div
|
||||||
className="admin-modal admin-confirm-modal"
|
className="admin-modal admin-confirm-modal"
|
||||||
role="dialog"
|
role="dialog"
|
||||||
|
|||||||
Reference in New Issue
Block a user