Allow the Modal component to block scrolling on any HTML element in…

…stead of just the `<body>` element (#472)
react-ui-org · Sep 11, 2023 · 1503bd6 · 1503bd6
1 parent d7792e2
commit 1503bd6
Show file tree

Hide file tree

Showing 3 changed files with 87 additions and 31 deletions.
diff --git a/src/components/Modal/Modal.jsx b/src/components/Modal/Modal.jsx
@@ -98,7 +98,7 @@ Modal.defaultProps = {
   closeButtonRef: null,
   portalId: null,
   position: 'center',
-  preventScrollUnderneath: 'default',
+  preventScrollUnderneath: window.document.body,
   primaryButtonRef: null,
   size: 'medium',
 };
@@ -137,15 +137,15 @@ Modal.propTypes = {
   position: PropTypes.oneOf(['top', 'center']),
   /**
    * Mode in which Modal prevents scroll of elements bellow:
-   * * `default` - Modal prevents scroll on the `body` element
    * * `off` - Modal does not prevent any scroll
+   * * [HTMLElement](https://developer.mozilla.org/en-US/docs/Web/API/HTMLElement) - Modal prevents scroll on this HTML element
    * * object
-   * * * `reset` - method called on Modal's unmount to reset scroll prevention
-   * * * `start` - method called on Modal's mount to custom scroll prevention
+   *   * `reset` - method called on Modal's unmount to reset scroll prevention
+   *   * `start` - method called on Modal's mount to custom scroll prevention
    */
   preventScrollUnderneath: PropTypes.oneOfType([
     PropTypes.oneOf([
-      'default',
+      HTMLElement,
       'off',
     ]),
     PropTypes.shape({

diff --git a/src/components/Modal/README.md b/src/components/Modal/README.md
@@ -26,7 +26,13 @@ React.createElement(() => {
   const modalPrimaryButtonRef = React.useRef();
   const modalCloseButtonRef = React.useRef();
   return (
-    <>
+    {/*
+      The `preventScrollUnderneath` feature is necessary for Modals to work in
+      React UI docs. You may not need it in your application.
+    */}
+    <RUIProvider globalProps={{
+      Modal: { preventScrollUnderneath: window.document.documentElement }
+    }}>
       <Button
         label="Launch modal"
         onClick={() => setModalOpen(true)}
@@ -66,7 +72,7 @@ React.createElement(() => {
           </Modal>
         )}
       </div>
-    </>
+    </RUIProvider>
   );
 });
 ```
@@ -116,7 +122,13 @@ React.createElement(() => {
   const modalPrimaryButtonRef = React.useRef();
   const modalCloseButtonRef = React.useRef();
   return (
-    <>
+    {/*
+      The `preventScrollUnderneath` feature is necessary for Modals to work in
+      React UI docs. You may not need it in your application.
+    */}
+    <RUIProvider globalProps={{
+      Modal: { preventScrollUnderneath: window.document.documentElement }
+    }}>
       <Button
         label="Launch blocking modal without title"
         onClick={() => {
@@ -235,7 +247,7 @@ React.createElement(() => {
           </Modal>
         )}
       </div>
-    </>
+    </RUIProvider>
   );
 });
 ```
@@ -265,7 +277,13 @@ React.createElement(() => {
   const modalPrimaryButtonRef = React.useRef();
   const modalCloseButtonRef = React.useRef();
   return (
-    <>
+    {/*
+      The `preventScrollUnderneath` feature is necessary for Modals to work in
+      React UI docs. You may not need it in your application.
+    */}
+    <RUIProvider globalProps={{
+      Modal: { preventScrollUnderneath: window.document.documentElement }
+    }}>
       <Button
         label="Launch with close button"
         onClick={() => {
@@ -356,7 +374,7 @@ React.createElement(() => {
           </Modal>
         )}
       </div>
-    </>
+    </RUIProvider>
   );
 });
 ```
@@ -393,7 +411,13 @@ React.createElement(() => {
   const modalPrimaryButtonRef = React.useRef();
   const modalCloseButtonRef = React.useRef();
   return (
-    <>
+    {/*
+      The `preventScrollUnderneath` feature is necessary for Modals to work in
+      React UI docs. You may not need it in your application.
+    */}
+    <RUIProvider globalProps={{
+      Modal: { preventScrollUnderneath: window.document.documentElement }
+    }}>
       <Button
         label="Launch modal with footer variants"
         onClick={() => setModalOpen(true)}
@@ -493,7 +517,7 @@ React.createElement(() => {
           </Modal>
         )}
       </div>
-    </>
+    </RUIProvider>
   );
 });
 ```
@@ -510,7 +534,13 @@ React.createElement(() => {
   const modalPrimaryButtonRef = React.useRef();
   const modalCloseButtonRef = React.useRef();
   return (
-    <>
+    {/*
+      The `preventScrollUnderneath` feature is necessary for Modals to work in
+      React UI docs. You may not need it in your application.
+    */}
+    <RUIProvider globalProps={{
+      Modal: { preventScrollUnderneath: window.document.documentElement }
+    }}>
       <Button
         label="Launch small modal"
         onClick={() => {
@@ -575,7 +605,7 @@ React.createElement(() => {
           </Modal>
         )}
       </div>
-    </>
+    </RUIProvider>
   );
 });
 ```
@@ -588,7 +618,13 @@ React.createElement(() => {
   const modalPrimaryButtonRef = React.useRef();
   const modalCloseButtonRef = React.useRef();
   return (
-    <>
+    {/*
+      The `preventScrollUnderneath` feature is necessary for Modals to work in
+      React UI docs. You may not need it in your application.
+    */}
+    <RUIProvider globalProps={{
+      Modal: { preventScrollUnderneath: window.document.documentElement }
+    }}>
       <Button
         label="Launch auto-width modal"
         onClick={() => setModalOpen(true)}
@@ -629,7 +665,7 @@ React.createElement(() => {
           </Modal>
         )}
       </div>
-    </>
+    </RUIProvider>
   );
 });
 ```
@@ -650,7 +686,13 @@ React.createElement(() => {
   const modalPrimaryButtonRef = React.useRef();
   const modalCloseButtonRef = React.useRef();
   return (
-    <>
+    {/*
+      The `preventScrollUnderneath` feature is necessary for Modals to work in
+      React UI docs. You may not need it in your application.
+    */}
+    <RUIProvider globalProps={{
+      Modal: { preventScrollUnderneath: window.document.documentElement }
+    }}>
       <Button
         label="Launch auto-with modal with a form"
         onClick={() => setModalOpen(true)}
@@ -692,7 +734,7 @@ React.createElement(() => {
           </Modal>
         )}
       </div>
-    </>
+    </RUIProvider>
   );
 });
 ```
@@ -708,7 +750,13 @@ React.createElement(() => {
   const modalPrimaryButtonRef = React.useRef();
   const modalCloseButtonRef = React.useRef();
   return (
-    <>
+    {/*
+      The `preventScrollUnderneath` feature is necessary for Modals to work in
+      React UI docs. You may not need it in your application.
+    */}
+    <RUIProvider globalProps={{
+      Modal: { preventScrollUnderneath: window.document.documentElement }
+    }}>
       <Button
         label="Launch modal at center"
         onClick={() => {
@@ -759,7 +807,7 @@ React.createElement(() => {
           </Modal>
         )}
       </div>
-    </>
+    </RUIProvider>
   );
 });
 ```
@@ -884,7 +932,13 @@ React.createElement(() => {
     </ModalContent>
   )
   return (
-    <>
+    {/*
+      The `preventScrollUnderneath` feature is necessary for Modals to work in
+      React UI docs. You may not need it in your application.
+    */}
+    <RUIProvider globalProps={{
+      Modal: { preventScrollUnderneath: window.document.documentElement }
+    }}>
       <Button
         label="Launch modal with scrolling body"
         onClick={() => {
@@ -945,7 +999,7 @@ React.createElement(() => {
           </Modal>
         )}
       </div>
-    </>
+    </RUIProvider>
   );
 });
 ```

diff --git a/src/components/Modal/_hooks/useModalScrollPrevention.js b/src/components/Modal/_hooks/useModalScrollPrevention.js
@@ -7,22 +7,24 @@ export const useModalScrollPrevention = (preventScrollUnderneath) => {
         return () => {};
       }
 
-      if (preventScrollUnderneath === 'default') {
+      if (preventScrollUnderneath instanceof HTMLElement) {
+        const scrollableElement = preventScrollUnderneath;
+
         const scrollbarWidth = Math.abs(window.innerWidth - window.document.documentElement.clientWidth);
-        const prevOverflow = window.document.body.style.overflow;
-        const prevPaddingRight = window.document.body.style.paddingRight;
+        const prevOverflow = scrollableElement.style.overflow;
+        const prevPaddingRight = scrollableElement.style.paddingRight;
 
-        window.document.body.style.overflow = 'hidden';
+        scrollableElement.style.overflow = 'hidden';
 
         if (Number.isNaN(parseInt(prevPaddingRight, 10))) {
-          window.document.body.style.paddingRight = `${scrollbarWidth}px`;
+          scrollableElement.style.paddingRight = `${scrollbarWidth}px`;
         } else {
-          window.document.body.style.paddingRight = `calc(${prevPaddingRight} + ${scrollbarWidth}px)`;
+          scrollableElement.style.paddingRight = `calc(${prevPaddingRight} + ${scrollbarWidth}px)`;
         }
 
         return () => {
-          window.document.body.style.overflow = prevOverflow;
-          window.document.body.style.paddingRight = prevPaddingRight;
+          scrollableElement.style.overflow = prevOverflow;
+          scrollableElement.style.paddingRight = prevPaddingRight;
         };
       }