fix: render Modal in a portal and avoid rendering it when closed (#465)

zakodium-oss · Mar 23, 2023 · 7b273ed · 7b273ed
1 parent 7cf740a
commit 7b273ed
Show file tree

Hide file tree

Showing 5 changed files with 31 additions and 21 deletions.
diff --git a/package-lock.json b/package-lock.json
diff --git 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
@@ -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
@@ -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
@@ -3,7 +3,7 @@
     "target": "ES2020",
     "lib": ["DOM", "DOM.Iterable", "ESNext"],
     "types": ["vite/client"],
-    "skipLibCheck": true,
+    "skipLibCheck": false,
     "esModuleInterop": true,
     "allowSyntheticDefaultImports": true,
     "strict": true,