From 3d1cba9c52a8023a5d1744f1beaf5a0da01ae868 Mon Sep 17 00:00:00 2001
From: "Planoetscher Daniel (Student Com20)"
<daniel.planoetscher@stud-inf.unibz.it>
Date: Sun, 20 Jun 2021 21:57:41 +0200
Subject: [PATCH] open popups in portals
---
client/src/components/ui/Popup/index.tsx | 10 +++++++---
1 file changed, 7 insertions(+), 3 deletions(-)
diff --git a/client/src/components/ui/Popup/index.tsx b/client/src/components/ui/Popup/index.tsx
index 989e11c..ee47a7f 100644
--- a/client/src/components/ui/Popup/index.tsx
+++ b/client/src/components/ui/Popup/index.tsx
@@ -1,8 +1,11 @@
import { ReactNode } from 'react';
+import { createPortal } from 'react-dom';
import './popup.scss';
+const root = document.getElementById('root') ?? document.getElementsByTagName('html')[0];
+
interface Props {
children: ReactNode
onClose: Function
@@ -10,17 +13,18 @@ interface Props {
export default function Popup({ children, onClose }: Props) {
document.addEventListener('keydown', (e) => {
- if(e.key === "Escape") {
+ if (e.key === "Escape") {
onClose();
}
});
- return (
+ return createPortal(
+
<div className="popup-container">
<div className="popup">
{children}
</div>
<div className="background" onClick={() => onClose()}></div>
- </div>
+ </div>, root
)
}
--
GitLab