fix: modal z-index and apply scroll lock when opened

Author: abelflopes

packages/components/modal/src/index.tsx

@@ -27,6 +27,8 @@ interface ModalProps extends React.HTMLAttributes<HTMLDivElement> {
 
 // TODO: add a11y https://react.dev/reference/react-dom/createPortal#rendering-a-modal-dialog-with-a-portal
 
+let openModals = 0;
+
 /**
  * Modal is a full screen overlay that sits atop the page content.
  * It’s used to focus attention on an important task or message and requires user input to be dismissed.
@@ -82,6 +84,18 @@ const Modal = ({
     setInternalOpen(open);
   }, [open]);
 
+  // Lock scroll if there are open modals
+  useEffect(() => {
+    if (internalOpen) openModals += 1;
+    else openModals -= 1;
+
+    if (openModals > 1) {
+      document.body.classList.add(`${styles.lock_scroll}`);
+    } else {
+      document.body.classList.remove(`${styles.lock_scroll}`);
+    }
+  }, [internalOpen, onClose, onOpen]);
+
   return (
     internalOpen && (
       <Layer elevation="overlay">

packages/components/modal/src/styles/index.module.scss

@@ -1,16 +1,22 @@
 @import "@react-ck/theme";
+@import "@react-ck/elevation";
 
 .root {
   @include define-css-var(modal, spacing, get-spacing(5));
 
   display: flex;
   align-items: center;
   justify-content: center;
-  position: absolute;
+  position: fixed;
   top: 0;
   left: 0;
   height: 100%;
   width: 100%;
+  z-index: map-get-strict($elevation, overlay);
+}
+
+.lock_scroll {
+  overflow: hidden;
 }
 
 .clickable_overlay {