[INT-3634] Fix IOS scrolling in modals (again) (hopefully for good)

package.json

@@ -19,6 +19,7 @@
     "@intellihr/icons": "0.0.6",
     "@intellihr/styled-components-breakpoint": "0.0.2",
     "better-react-spinkit": "2.0.4",
+    "body-scroll-lock": "2.5.10",
     "capitalize": "1.0.0",
     "chart.js": "2.7.2",
     "classnames": "2.2.5",

src/common/services/utils.ts

@@ -72,30 +72,6 @@ namespace Utils {
       setTimeout(update, msPerStep)
     })
   }
-
-  const previousBodyOverflowSetting = document.body && document.body.style && document.body.style.overflow
-
-  export function enableBodyScroll () {
-    document.body.style.overflow = previousBodyOverflowSetting
-    if (isIosDevice()) {
-      document.body.style.position = null
-    }
-  }
-
-  export function disableBodyScroll () {
-    document.body.style.overflow = 'hidden'
-    if (isIosDevice()) {
-      document.body.style.position = 'fixed'
-    }
-  }
-
-  export function isIosDevice () {
-    return typeof window !== 'undefined' &&
-      window.navigator &&
-      window.navigator.platform &&
-      /iPad|iPhone|iPod|(iPad Simulator)|(iPhone Simulator)|(iPod Simulator)/.test(window.navigator.platform)
-
-  }
 }
 
 export {

src/domain/Modals/Modal/Modal.examples.md

@@ -117,15 +117,6 @@ ModalExample.defaultProps = { showCloseButton: true };
 </div>
 ```
 
-#### shouldCloseOnEsc and shouldCloseOnOverlayClick
-
-```jsx
-
-<div style={{height: 2000}}>
-  The following is a dummy space to fill out the page and ensure it doesn't scroll when a modal is open
-</div>
-```
-
 #### Long pages
 ```jsx
 

src/domain/Modals/Modal/__snapshots__/Modal.test.tsx.snap

@@ -62,8 +62,13 @@ exports[`<Modal /> should render a hidden modal 1`] = `
 
 @media only screen and (max-width:640px) {
   .c0 .modal-overlay {
-    overflow-y: hidden;
+    background-color: #FFFFFF;
+    height: 100%;
+    min-height: 100vh;
     padding: 0;
+    left: 0;
+    margin: 0;
+    top: 0;
   }
 }
 
@@ -72,17 +77,12 @@ exports[`<Modal /> should render a hidden modal 1`] = `
     border: 0;
     border-radius: 0;
     max-width: none;
-    overflow-y: scroll;
+    min-height: 100vh;
     position: initial;
     -webkit-transform: none;
     -ms-transform: none;
     transform: none;
-    -webkit-overflow-scrolling: touch;
-    height: 100%;
-    left: 0;
-    margin: 0;
-    min-height: 100vh;
-    top: 0;
+    padding-bottom: 100px;
   }
 }
 

src/domain/Modals/Modal/style.tsx

@@ -1,5 +1,5 @@
 import React  from 'react'
-import { Utils } from '../../../common/services/utils'
+import { disableBodyScroll, enableBodyScroll } from 'body-scroll-lock'
 import Color from 'color'
 import styled, { StyledComponentClass } from 'styled-components'
 import ReactModal from 'react-modal'
@@ -34,9 +34,9 @@ class ReactModalAdapter extends React.PureComponent<IReactModalAdapter> {
 
   private setOverlayRef = (overlayRef: HTMLDivElement) => {
     if (!this.overlayRef && overlayRef) {
-      Utils.disableBodyScroll()
+      disableBodyScroll(overlayRef, { reserveScrollBarGap: true })
     } else if (this.overlayRef && !overlayRef) {
-      Utils.enableBodyScroll()
+      enableBodyScroll(this.overlayRef)
     }
 
     this.overlayRef = overlayRef
@@ -82,8 +82,14 @@ const StyledReactModal = styled(ReactModalAdapter)`
     top: 0;
 
     @media only screen and (max-width: ${breakpointTablet}px) {
-      overflow-y: hidden;
+      background-color: ${Variables.Color.n100};
+      height: 100%;
+      min-height: 100vh;
       padding: 0;
+
+      left: 0;
+      margin: 0;
+      top: 0;
     }
   }
 
@@ -104,16 +110,12 @@ const StyledReactModal = styled(ReactModalAdapter)`
       border-radius: 0;
 
       max-width: none;
-      overflow-y: scroll;
+      min-height: 100vh;
       position: initial;
       transform: none;
-      -webkit-overflow-scrolling: touch;
-
-      height: 100%;
-      left: 0;
-      margin: 0;
-      min-height: 100vh;
-      top: 0;
+
+      // Add a bottom padding in mobile to counteract ios bottom bar
+      padding-bottom: 100px;
     }
 
     .modal-close-button {

yarn.lock

@@ -1884,6 +1884,11 @@ body-parser@1.18.2:
     raw-body "2.3.2"
     type-is "~1.6.15"
 
+body-scroll-lock@2.5.10:
+  version "2.5.10"
+  resolved "https://registry.yarnpkg.com/body-scroll-lock/-/body-scroll-lock-2.5.10.tgz#aefde4dab39b8d41391e9d14cebc52c56694af35"
+  integrity sha512-yuVO3LEyIB1D+nzocCJGJcSV43tPD74Ma74use7wckajJsCeTvLvC1zy2rpjOWBc45uSzmrUSREoSPLUTPPG/Q==
+
 bonjour@^3.5.0:
   version "3.5.0"
   resolved "https://registry.yarnpkg.com/bonjour/-/bonjour-3.5.0.tgz#8e890a183d8ee9a2393b3844c691a42bcf7bc9f5"