fix: fix #modal scrolling issue for touch devices

dnbexperience · Nov 25, 2020 · 6c49079 · 6c49079
1 parent 2e6b104
commit 6c49079
Show file tree

Hide file tree

Showing 8 changed files with 194 additions and 125 deletions.
diff --git a/packages/dnb-ui-lib/src/components/modal/Modal.js b/packages/dnb-ui-lib/src/components/modal/Modal.js
@@ -22,12 +22,14 @@ import { createSpacingClasses } from '../space/SpacingHelper'
 import Button from '../button/Button'
 import Section from '../section/Section'
 import HelpButtonInstance from '../help-button/HelpButtonInstance'
-import ModalContent, { CloseButton } from './ModalContent'
+import ModalContent, {
+  CloseButton,
+  getListOfModalRoots
+} from './ModalContent'
 
 export default class Modal extends React.PureComponent {
   static tagName = 'dnb-modal'
   static contextType = Context
-  static modalRoot = null // gets later '.dnb-modal-root'
 
   static propTypes = {
     id: PropTypes.string,
@@ -184,20 +186,20 @@ export default class Modal extends React.PureComponent {
 
     try {
       id = `dnb-modal-${id || 'root'}`
-      window.modalRoot = document.getElementById(id)
-      if (!window.modalRoot) {
-        window.modalRoot = document.createElement('div')
-        window.modalRoot.setAttribute('id', id)
+      window.__modalRoot = document.getElementById(id)
+      if (!window.__modalRoot) {
+        window.__modalRoot = document.createElement('div')
+        window.__modalRoot.setAttribute('id', id)
         document.body.insertBefore(
-          window.modalRoot,
+          window.__modalRoot,
           document.body.firstChild
         )
       }
     } catch (e) {
       warn('Modal: Could not insert dnb-modal-root', e)
     }
 
-    return window.modalRoot
+    return window.__modalRoot
   }
 
   static getDerivedStateFromProps(props, state) {
@@ -246,6 +248,8 @@ export default class Modal extends React.PureComponent {
         this._onUnmount.push(fn)
       }
     }
+
+    this.handleSideEffects()
   }
 
   componentWillUnmount() {
@@ -295,9 +299,8 @@ export default class Modal extends React.PureComponent {
   addToIndex() {
     if (typeof window !== 'undefined') {
       try {
-        window.modalRoot = window.modalRoot || {}
-        window.modalRoot.index = window.modalRoot.index || []
-        window.modalRoot.index.push(this)
+        window.__modalStack = window.__modalStack || []
+        window.__modalStack.push(this)
       } catch (e) {
         warn(e)
       }
@@ -307,11 +310,12 @@ export default class Modal extends React.PureComponent {
   removeFromIndex() {
     if (typeof window !== 'undefined') {
       try {
-        window.modalRoot.index = window.modalRoot.index.filter(
+        window.__modalStack = window.__modalStack || []
+        window.__modalStack = window.__modalStack.filter(
           (cur) => cur !== this
         )
-        if (!window.modalRoot.index.length) {
-          delete window.modalRoot.index
+        if (!window.__modalStack.length) {
+          delete window.__modalStack
         }
       } catch (e) {
         warn(e)
@@ -464,12 +468,9 @@ export default class Modal extends React.PureComponent {
     } else {
       if (ifIsLatest && typeof window !== 'undefined') {
         try {
-          const index = window.modalRoot.index
-          if (index && index.length) {
-            const last = index[index.length - 1]
-            if (last !== this) {
-              return // stop here
-            }
+          const last = getListOfModalRoots(-1)
+          if (last !== this) {
+            return // stop here
           }
         } catch (e) {
           warn(e)
@@ -644,9 +645,9 @@ class ModalRoot extends React.PureComponent {
         if (
           this.portalElem &&
           typeof window !== 'undefined' &&
-          window.modalRoot
+          window.__modalRoot
         ) {
-          window.modalRoot.appendChild(this.portalElem)
+          window.__modalRoot.appendChild(this.portalElem)
         }
       } catch (e) {
         warn(e)
@@ -660,10 +661,10 @@ class ModalRoot extends React.PureComponent {
       if (
         this.portalElem &&
         typeof window !== 'undefined' &&
-        window.modalRoot &&
-        window.modalRoot.removeChild
+        window.__modalRoot &&
+        window.__modalRoot.removeChild
       ) {
-        window.modalRoot.removeChild(this.portalElem)
+        window.__modalRoot.removeChild(this.portalElem)
         this.portalElem = null
       }
     } catch (e) {
@@ -681,7 +682,7 @@ class ModalRoot extends React.PureComponent {
     if (
       this.portalElem &&
       typeof window !== 'undefined' &&
-      window.modalRoot &&
+      window.__modalRoot &&
       this.state.isMounted
     ) {
       return ReactDOM.createPortal(

diff --git a/packages/dnb-ui-lib/src/components/modal/ModalContent.js b/packages/dnb-ui-lib/src/components/modal/ModalContent.js
@@ -119,8 +119,10 @@ export default class ModalContent extends React.PureComponent {
 
   componentWillUnmount() {
     clearTimeout(this._focusTimeout)
-    this.revertScrollPossibility()
-    this._ii.revert()
+    if (getListOfModalRoots().length <= 1) {
+      this.revertScrollPossibility()
+      this._ii.revert()
+    }
   }
 
   setFocus() {
@@ -359,3 +361,24 @@ export class CloseButton extends React.PureComponent {
     )
   }
 }
+
+export function getListOfModalRoots(index = null) {
+  if (typeof window !== 'undefined') {
+    try {
+      const stack = window.__modalStack || []
+      if (index !== null) {
+        if (index === -1 && stack.length) {
+          return stack[stack.length - 1]
+        } else if (index > -1) {
+          return stack[index]
+        }
+      }
+
+      return stack
+    } catch (e) {
+      warn(e)
+    }
+  }
+
+  return []
+}
diff --git a/packages/dnb-ui-lib/src/components/modal/__tests__/Modal.test.js b/packages/dnb-ui-lib/src/components/modal/__tests__/Modal.test.js
@@ -34,6 +34,10 @@ beforeAll(() => {
   document.body.appendChild(button)
 })
 
+beforeEach(() => {
+  window.__modalStack = []
+})
+
 describe('Modal component', () => {
   const Comp = mount(<Component {...props} />)
   Comp.setState({

diff --git a/packages/dnb-ui-lib/src/components/modal/__tests__/__snapshots__/Modal.test.js.snap b/packages/dnb-ui-lib/src/components/modal/__tests__/__snapshots__/Modal.test.js.snap
@@ -1402,7 +1402,7 @@ button.dnb-button::-moz-focus-inner {
       min-width: var(--modal-min-width);
       max-width: var(--modal-max-width);
       height: auto;
-      max-height: calc( 100vh - var(--modal-spacing) * 2);
+      max-height: calc(100vh - var(--modal-content-top));
       box-shadow: 0 1px 6px rgba(0, 0, 0, 0.16);
       border-radius: 0.5rem;
       user-select: text;
@@ -1415,7 +1415,7 @@ button.dnb-button::-moz-focus-inner {
         height: 100vh;
         height: calc(100vh - var(--modal-height-offset, 0.0001rem));
         max-width: 100%;
-        max-height: 100vh;
+        max-height: calc(100vh - var(--modal-height-offset, 0.0001rem));
         border-radius: 0;
         box-shadow: none; } }
     .dnb-modal__content--spacing .dnb-modal__content__inner {
@@ -1445,7 +1445,7 @@ button.dnb-button::-moz-focus-inner {
       height: calc(100vh - var(--modal-height-offset, 0.0001rem));
       height: calc(100vh - var(--modal-height-offset, 0.0001rem));
       max-width: 100%;
-      max-height: 100vh;
+      max-height: calc(100vh - var(--modal-height-offset, 0.0001rem));
       border-radius: 0;
       box-shadow: none;
       width: var(--modal-drawer-width);
@@ -1485,7 +1485,7 @@ button.dnb-button::-moz-focus-inner {
       height: 100vh;
       height: calc(100vh - var(--modal-height-offset, 0.0001rem));
       max-width: 100%;
-      max-height: 100vh;
+      max-height: calc(100vh - var(--modal-height-offset, 0.0001rem));
       border-radius: 0;
       box-shadow: none; }
     html:not([data-visual-test]) .dnb-modal__content--drawer.dnb-modal__content--left .dnb-modal__content__inner {

diff --git a/packages/dnb-ui-lib/src/components/modal/style/_modal-mixins.scss b/packages/dnb-ui-lib/src/components/modal/style/_modal-mixins.scss
@@ -13,7 +13,7 @@
   }
 
   max-width: 100%; // fixes overflow issue on some browsers
-  max-height: 100vh;
+  max-height: calc(100vh - var(--modal-height-offset, 0.0001rem));
 
   border-radius: 0;
   box-shadow: none;

diff --git a/packages/dnb-ui-lib/src/components/modal/style/_modal.scss b/packages/dnb-ui-lib/src/components/modal/style/_modal.scss
@@ -74,9 +74,7 @@
       max-width: var(--modal-max-width);
 
       height: auto;
-      max-height: calc(
-        100vh - var(--modal-spacing) * 2
-      ); // minus vertical padding
+      max-height: calc(100vh - var(--modal-content-top));
 
       @include defaultDropShadow();
       border-radius: 0.5rem;