Merge pull request #402 from vtfk/dialog-disable-scrolling

Dialog: disable scrolling when open

Author: karleinarb

src/ui/Dialog/Dialog.stories.js

@@ -113,3 +113,51 @@ export function Nested () {
     </>
   )
 }
+
+export function PreventScrollingBehind () {
+  const [dialogOpen, setIsDialogOpen] = useState(false)
+  const [dialog2Open, setDialog2Open] = useState(false)
+
+  return (
+    <>
+      <div style={{ height: '200vh' }}>
+        This is big div twice the height of the screen, it should not scroll when dialog is open
+        <Button onClick={() => { setIsDialogOpen(!dialogOpen) }}>{`${!dialogOpen ? 'Åpne' : 'Lukk'} modal`}</Button>
+      </div>
+      <p />
+
+      <Dialog
+        isOpen={dialogOpen}
+        onDismiss={() => { setIsDialogOpen(false) }}
+        showCloseButton
+        width='60%'
+        height='50%'
+      >
+        <DialogTitle>This is the first dialog</DialogTitle>
+        <DialogBody>
+          Click to open another dialog
+        </DialogBody>
+        <DialogActions>
+          <Button size='small' onClick={() => setDialog2Open(true)}>Open nested dialog</Button>
+          <Button size='small' type='secondary' onClick={() => { setIsDialogOpen(false) }}>Close</Button>
+        </DialogActions>
+      </Dialog>
+      <Dialog
+        isOpen={dialog2Open}
+        onDismiss={() => setDialog2Open(false)}
+        width='50%'
+        height='30%'
+      >
+        <DialogTitle>
+          This is the second nested dialog
+        </DialogTitle>
+        <DialogBody>
+          Test
+        </DialogBody>
+        <DialogActions>
+          <Button size='small' onClick={() => setDialog2Open(false)}>Close</Button>
+        </DialogActions>
+      </Dialog>
+    </>
+  )
+}

src/ui/Dialog/index.js

@@ -5,6 +5,7 @@ import { nanoid } from 'nanoid'
 import { ReactComponent as CloseIcon } from './icon-close.svg'
 
 import './styles.scss'
+import ScrollLock from 'react-scrolllock'
 
 export function Dialog ({ isOpen, title, className, persistent, width, height, showCloseButton, onDismiss, onCloseBtnClick, onClickOutside, onPressEscape, style, ...props }) {
   // Set an unique ID for the dialog
@@ -74,17 +75,25 @@ export function Dialog ({ isOpen, title, className, persistent, width, height, s
   // Render the component
   return (
     isOpen === true &&
-      <>
+      <ScrollLock isActive={isOpen}>
         <div id={`dialog-backdrop-${id}`} className={`dialog-backdrop ${className}`} onClick={(e) => handleBackdropClick(e)}>
-          <div id={`dialog-${id}`} className='dialog' aria-label='dialog' aria-modal='true' role='dialog' style={parsedStyles}>
+          <div
+            id={`dialog-${id}`}
+            className='dialog'
+            aria-label='dialog'
+            aria-modal='true'
+            role='dialog'
+            style={parsedStyles}
+            onClick={(e) => { e.preventDefault(); e.stopPropagation(); }}
+          >
             {!persistent && showCloseButton &&
               <button className='dialog-close-btn' onClick={(e) => { handleCloseBtnClick(); e.preventDefault() }} aria-label='Lukk'>
                 <CloseIcon alt='' />
               </button>}
             {props.children}
           </div>
         </div>
-      </>
+      </ScrollLock>
   )
 }