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