fix(mui): ConfirmDialog retains text during close transition (no empty fade-out)

The message was bound to the caller's selected row, which gets nulled on close at the same instant the Dialog begins its fade-out — so it faded out with empty text. Now the dialog caches the last shown title/message and renders that through the exit transition.

Co-Authored-By: Claude Opus 4.8 (1M context) <noreply@anthropic.com>
This commit is contained in:
BOHA
2026-06-06 21:02:39 +02:00
parent 645d0127ec
commit 16db585022

View File

@@ -1,3 +1,4 @@
import { useRef } from "react";
import Dialog from "@mui/material/Dialog"; import Dialog from "@mui/material/Dialog";
import DialogTitle from "@mui/material/DialogTitle"; import DialogTitle from "@mui/material/DialogTitle";
import DialogContent from "@mui/material/DialogContent"; import DialogContent from "@mui/material/DialogContent";
@@ -29,15 +30,21 @@ export default function ConfirmDialog({
confirmVariant = "primary", confirmVariant = "primary",
loading = false, loading = false,
}: ConfirmDialogProps) { }: ConfirmDialogProps) {
// Retain the last shown title/message so the close (fade-out) transition
// doesn't flash empty when the caller clears its source data (e.g. sets the
// selected row to null) at the same moment it closes the dialog.
const shown = useRef({ title, message });
if (isOpen) shown.current = { title, message };
return ( return (
<Dialog <Dialog
open={isOpen} open={isOpen}
onClose={loading ? undefined : onClose} onClose={loading ? undefined : onClose}
slotProps={{ paper: { sx: { borderRadius: 3 } } }} slotProps={{ paper: { sx: { borderRadius: 3 } } }}
> >
<DialogTitle>{title}</DialogTitle> <DialogTitle>{shown.current.title}</DialogTitle>
<DialogContent> <DialogContent>
<DialogContentText>{message}</DialogContentText> <DialogContentText>{shown.current.message}</DialogContentText>
</DialogContent> </DialogContent>
<DialogActions sx={{ px: 3, pb: 2 }}> <DialogActions sx={{ px: 3, pb: 2 }}>
<MuiButton onClick={onClose} color="inherit" disabled={loading}> <MuiButton onClick={onClose} color="inherit" disabled={loading}>