fix: resolve issue described by radix-ui/primitives#1159 by moving mo…

…dal content into overlay children
nasa-jpl · Feb 16, 2022 · 0580e52 · 0580e52
1 parent 66856e8
commit 0580e52
Showing 1 changed file with 19 additions and 17 deletions.
diff --git a/src/components/Modal/Modal.tsx b/src/components/Modal/Modal.tsx
@@ -80,24 +80,26 @@ export const Modal = (props: ModalProps) => {
 
   return (
     <DialogPrimitive.Root {...modalProps}>
-      <DialogPrimitive.Overlay className="st-react-modal--overlay" />
-      <ModalContent className={className}>
-        <div className="st-react-modal--header">
-          <div className="st-react-modal--header--title-row">
-            <ModalTitle asChild>
-              <div className="st-react-modal--header--text st-typography-header">
-                {title}
-              </div>
-            </ModalTitle>
-            <DialogPrimitive.Close asChild>
-              <Button variant="icon">
-                <IconClose />
-              </Button>
-            </DialogPrimitive.Close>
+      <DialogPrimitive.Overlay className="st-react-modal--overlay">
+        <ModalContent className={className}>
+          <div className="st-react-modal--header">
+            <div className="st-react-modal--header--title-row">
+              <ModalTitle asChild>
+                <div className="st-react-modal--header--text st-typography-header">
+                  {title}
+                </div>
+              </ModalTitle>
+              <DialogPrimitive.Close asChild>
+                <Button variant="icon">
+                  <IconClose />
+                </Button>
+              </DialogPrimitive.Close>
+            </div>
           </div>
-        </div>
-        {children}
-      </ModalContent>
+          {children}
+        </ModalContent>
+      </DialogPrimitive.Overlay>
+
       {trigger && <ModalTrigger asChild>{trigger}</ModalTrigger>}
     </DialogPrimitive.Root>
   );