From 9e444f48f331c3d3d192c8af0b5409160b32c0a4 Mon Sep 17 00:00:00 2001
From: "Planoetscher Daniel (Student Com20)"
<daniel.planoetscher@stud-inf.unibz.it>
Date: Sun, 20 Jun 2021 22:12:32 +0200
Subject: [PATCH] deny scrolling within popup
---
client/src/components/ui/Popup/index.tsx | 10 ++++++++--
1 file changed, 8 insertions(+), 2 deletions(-)
diff --git a/client/src/components/ui/Popup/index.tsx b/client/src/components/ui/Popup/index.tsx
index ee47a7f..88a9e54 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
)
}
--
GitLab