diff options
Diffstat (limited to 'FrontEnd/src/views/common/dialog/Dialog.tsx')
| -rw-r--r-- | FrontEnd/src/views/common/dialog/Dialog.tsx | 10 |
1 files changed, 8 insertions, 2 deletions
diff --git a/FrontEnd/src/views/common/dialog/Dialog.tsx b/FrontEnd/src/views/common/dialog/Dialog.tsx index 9ce344dc..2ff7bea8 100644 --- a/FrontEnd/src/views/common/dialog/Dialog.tsx +++ b/FrontEnd/src/views/common/dialog/Dialog.tsx @@ -1,4 +1,4 @@ -import { ReactNode } from "react"; +import { ReactNode, useRef } from "react"; import ReactDOM from "react-dom"; import { CSSTransition } from "react-transition-group"; import classNames from "classnames"; @@ -30,15 +30,21 @@ export default function Dialog({ }: DialogProps) { color = color ?? "primary"; + const nodeRef = useRef(null); + return ReactDOM.createPortal( <CSSTransition + nodeRef={nodeRef} mountOnEnter unmountOnExit in={open} timeout={300} classNames="cru-dialog" > - <div className={classNames("cru-dialog-overlay", `cru-${color}`)}> + <div + ref={nodeRef} + className={classNames("cru-dialog-overlay", `cru-${color}`)} + > <div className="cru-dialog-background" onClick={ |