From 7b273ede3cf7513b215c3a150b115dcccb3be62f Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?Micha=C3=ABl=20Zasso?= <targos@protonmail.com>
Date: Thu, 23 Mar 2023 17:30:10 +0100
Subject: [PATCH] fix: render Modal in a portal and avoid rendering it when
 closed (#465)

---
 package-lock.json                     |  8 ++++----
 package.json                          |  2 +-
 src/components/modal/ConfirmModal.tsx | 20 ++++++++++++--------
 src/components/modal/Modal.tsx        | 20 +++++++++++++-------
 tsconfig.json                         |  2 +-
 5 files changed, 31 insertions(+), 21 deletions(-)

diff --git a/package-lock.json b/package-lock.json
index abf1e93d..deeb3dcd 100644
--- a/package-lock.json
+++ b/package-lock.json
@@ -31,7 +31,7 @@
         "netcdfjs": "^2.0.2",
         "react-d3-utils": "^1.0.0",
         "react-dropzone": "^14.2.3",
-        "react-error-boundary": "^4.0.1",
+        "react-error-boundary": "^4.0.2",
         "react-icons": "^4.8.0",
         "react-inspector": "^6.0.1",
         "react-kbs": "^2.1.1",
@@ -8888,9 +8888,9 @@
       }
     },
     "node_modules/react-error-boundary": {
-      "version": "4.0.1",
-      "resolved": "https://registry.npmjs.org/react-error-boundary/-/react-error-boundary-4.0.1.tgz",
-      "integrity": "sha512-1z9zlNkYz35NwHETsksZtYDh00BJkoeBKxYehEx6cVNUQCXPMAiI/hkX6yxpJcpd4bECCPhfqIqXuDLVTmmkSw==",
+      "version": "4.0.2",
+      "resolved": "https://registry.npmjs.org/react-error-boundary/-/react-error-boundary-4.0.2.tgz",
+      "integrity": "sha512-/h21OS80hQ1m/s5UVOp1JKkC8XmUo0rOTRUliGSmWtvswkbbijuQ074K0QLEHwxwwesTt7ksR74/9EHImqWo+A==",
       "dependencies": {
         "@babel/runtime": "^7.12.5"
       },
diff --git a/package.json b/package.json
index 4eab1f90..7f4287e9 100644
--- a/package.json
+++ b/package.json
@@ -83,7 +83,7 @@
     "netcdfjs": "^2.0.2",
     "react-d3-utils": "^1.0.0",
     "react-dropzone": "^14.2.3",
-    "react-error-boundary": "^4.0.1",
+    "react-error-boundary": "^4.0.2",
     "react-icons": "^4.8.0",
     "react-inspector": "^6.0.1",
     "react-kbs": "^2.1.1",
diff --git a/src/components/modal/ConfirmModal.tsx b/src/components/modal/ConfirmModal.tsx
index b1bc0aee..8fb99035 100644
--- a/src/components/modal/ConfirmModal.tsx
+++ b/src/components/modal/ConfirmModal.tsx
@@ -2,6 +2,7 @@ import styled from '@emotion/styled';
 import type { ReactNode } from 'react';
 
 import { Button } from '..';
+import { Portal } from '../root-layout/Portal';
 
 import { useDialog } from './useDialog';
 
@@ -20,7 +21,6 @@ interface ConfirmModalProps {
 }
 
 const ConfirmModalDialog = styled.dialog`
-  display: flex;
   position: fixed;
   background-color: transparent;
 
@@ -29,7 +29,7 @@ const ConfirmModalDialog = styled.dialog`
   }
 `;
 
-const ConfirmModalOpened = styled.div<{
+const ConfirmModalContents = styled.div<{
   headerColor: string;
 }>`
   position: relative;
@@ -81,10 +81,14 @@ export function ConfirmModal(props: ConfirmModalProps) {
     onRequestClose,
   });
 
+  if (!isOpen) {
+    return null;
+  }
+
   return (
-    <ConfirmModalDialog ref={ref} onClick={onClick}>
-      {isOpen ? (
-        <ConfirmModalOpened headerColor={headerColor} style={{ maxWidth }}>
+    <Portal>
+      <ConfirmModalDialog ref={ref} onClick={onClick}>
+        <ConfirmModalContents headerColor={headerColor} style={{ maxWidth }}>
           <ConfirmModalChildrenRoot headerColor={headerColor}>
             {children}
           </ConfirmModalChildrenRoot>
@@ -111,8 +115,8 @@ export function ConfirmModal(props: ConfirmModalProps) {
               {cancelText}
             </Button>
           </ConfirmModalFooter>
-        </ConfirmModalOpened>
-      ) : null}
-    </ConfirmModalDialog>
+        </ConfirmModalContents>
+      </ConfirmModalDialog>
+    </Portal>
   );
 }
diff --git a/src/components/modal/Modal.tsx b/src/components/modal/Modal.tsx
index 0dc27ddb..5c00939a 100644
--- a/src/components/modal/Modal.tsx
+++ b/src/components/modal/Modal.tsx
@@ -1,6 +1,8 @@
 import styled from '@emotion/styled';
 import type { ReactElement, ReactNode } from 'react';
 
+import { Portal } from '../root-layout/Portal';
+
 import ModalCloseButton from './ModalCloseButton';
 import { useDialog } from './useDialog';
 
@@ -25,7 +27,7 @@ const DialogRoot = styled.dialog`
   }
 `;
 
-const DialogOpened = styled.div`
+const DialogContents = styled.div`
   position: relative;
   display: flex;
   flex-direction: column;
@@ -76,10 +78,14 @@ export function Modal(props: ModalProps) {
     onRequestClose,
   });
 
+  if (!isOpen) {
+    return null;
+  }
+
   return (
-    <DialogRoot ref={ref} onClick={onClick}>
-      {isOpen ? (
-        <DialogOpened
+    <Portal>
+      <DialogRoot ref={ref} onClick={onClick}>
+        <DialogContents
           style={{
             maxWidth,
             height: height || 'max-content',
@@ -88,9 +94,9 @@ export function Modal(props: ModalProps) {
         >
           {children}
           {hasCloseButton && <ModalCloseButton onClick={onRequestClose} />}
-        </DialogOpened>
-      ) : null}
-    </DialogRoot>
+        </DialogContents>
+      </DialogRoot>
+    </Portal>
   );
 }
 
diff --git a/tsconfig.json b/tsconfig.json
index 1c1b566f..8044f97b 100644
--- a/tsconfig.json
+++ b/tsconfig.json
@@ -3,7 +3,7 @@
     "target": "ES2020",
     "lib": ["DOM", "DOM.Iterable", "ESNext"],
     "types": ["vite/client"],
-    "skipLibCheck": true,
+    "skipLibCheck": false,
     "esModuleInterop": true,
     "allowSyntheticDefaultImports": true,
     "strict": true,