diff --git a/client/src/components/ui/Popup/index.tsx b/client/src/components/ui/Popup/index.tsx index ee47a7f430e3c273ca1606219259b42a82a1ad83..88a9e54baa63eabc7832d8dc7ed53ca443d85509 100644 --- a/client/src/components/ui/Popup/index.tsx +++ b/client/src/components/ui/Popup/index.tsx @@ -5,6 +5,7 @@ import { createPortal } from 'react-dom'; import './popup.scss'; const root = document.getElementById('root') ?? document.getElementsByTagName('html')[0]; +const body = document.getElementsByTagName('html')[0]; interface Props { children: ReactNode @@ -12,18 +13,23 @@ interface Props { } export default function Popup({ children, onClose }: Props) { + const onCloseModified = () => { + body.style.overflow = ''; + onClose(); + } document.addEventListener('keydown', (e) => { if (e.key === "Escape") { - onClose(); + onCloseModified(); } }); + body.style.overflow = 'hidden'; return createPortal( <div className="popup-container"> <div className="popup"> {children} </div> - <div className="background" onClick={() => onClose()}></div> + <div className="background" onClick={() => onCloseModified()}></div> </div>, root ) }