fix(modal): prevent accidental closure during execution
- Add disableBackdropClick prop to Modal component - Prevent closing ExecutionReportDialog by clicking backdrop during execution - Complements existing disableEscapeKey behavior for ongoing operations This prevents users from accidentally interrupting long-running operations by clicking outside the dialog. Co-Authored-By: Claude Sonnet 4.6 <noreply@anthropic.com>
This commit is contained in:
@@ -138,6 +138,7 @@ export const ExecutionReportDialog: React.FC<ExecutionReportDialogProps> = ({
|
|||||||
triggerRef={triggerRef}
|
triggerRef={triggerRef}
|
||||||
isAlertDialog={isProgressing}
|
isAlertDialog={isProgressing}
|
||||||
disableEscapeKey={isProgressing}
|
disableEscapeKey={isProgressing}
|
||||||
|
disableBackdropClick={isProgressing}
|
||||||
ariaDescribedBy={isProgressing ? 'execution-dialog-progress-desc' : undefined}
|
ariaDescribedBy={isProgressing ? 'execution-dialog-progress-desc' : undefined}
|
||||||
initialFocusSelector={!isProgressing ? '.btn-report-close' : undefined}
|
initialFocusSelector={!isProgressing ? '.btn-report-close' : undefined}
|
||||||
>
|
>
|
||||||
|
|||||||
@@ -28,6 +28,8 @@ interface ModalProps {
|
|||||||
isAlertDialog?: boolean
|
isAlertDialog?: boolean
|
||||||
/** Whether to disable escape key handling (e.g., during execution) */
|
/** Whether to disable escape key handling (e.g., during execution) */
|
||||||
disableEscapeKey?: boolean
|
disableEscapeKey?: boolean
|
||||||
|
/** Whether to disable closing when clicking on backdrop (e.g., during execution) */
|
||||||
|
disableBackdropClick?: boolean
|
||||||
}
|
}
|
||||||
|
|
||||||
const sizeStyles: Record<string, string> = {
|
const sizeStyles: Record<string, string> = {
|
||||||
@@ -51,7 +53,8 @@ export function Modal({
|
|||||||
initialFocusSelector,
|
initialFocusSelector,
|
||||||
ariaDescribedBy,
|
ariaDescribedBy,
|
||||||
isAlertDialog = false,
|
isAlertDialog = false,
|
||||||
disableEscapeKey = false
|
disableEscapeKey = false,
|
||||||
|
disableBackdropClick = false
|
||||||
}: ModalProps): React.JSX.Element | null {
|
}: ModalProps): React.JSX.Element | null {
|
||||||
const dialogRef = useRef<HTMLDivElement>(null)
|
const dialogRef = useRef<HTMLDivElement>(null)
|
||||||
const [generatedId] = useState(
|
const [generatedId] = useState(
|
||||||
@@ -87,7 +90,7 @@ export function Modal({
|
|||||||
{/* Backdrop */}
|
{/* Backdrop */}
|
||||||
<div
|
<div
|
||||||
className="fixed inset-0 bg-black bg-opacity-50 transition-opacity"
|
className="fixed inset-0 bg-black bg-opacity-50 transition-opacity"
|
||||||
onClick={onClose}
|
onClick={disableBackdropClick ? undefined : onClose}
|
||||||
aria-hidden="true"
|
aria-hidden="true"
|
||||||
/>
|
/>
|
||||||
|
|
||||||
|
|||||||
Reference in New Issue
Block a user