fix(Dialog): fix Safari issue not able to scroll

This PR fixes an issue where the Dialog component did not scroll when there was content that overflows the Dialog on the Safari iOS browser.
dnbexperience · May 19, 2022 · 3f6fb31 · 3f6fb31
1 parent 09e5293
commit 3f6fb31
Show file tree

Hide file tree

Showing 10 changed files with 814 additions and 716 deletions.
diff --git a/packages/dnb-eufemia/src/components/dialog/Dialog.tsx b/packages/dnb-eufemia/src/components/dialog/Dialog.tsx
@@ -90,7 +90,7 @@ function Dialog(
       preventOverlayClose !== undefined ? preventOverlayClose : true
   }
 
-  if (fullscreen === undefined) {
+  if (fullscreen === undefined && fullscreen !== false) {
     currentFullscreen = variant === 'information' ? 'auto' : false
   }
 

diff --git a/packages/dnb-eufemia/src/components/dialog/DialogContent.tsx b/packages/dnb-eufemia/src/components/dialog/DialogContent.tsx
@@ -8,6 +8,7 @@ import classnames from 'classnames'
 import {
   isTrue,
   findElementInChildren,
+  validateDOMAttributes,
 } from '../../shared/component-helper'
 import ScrollView from '../../fragments/scroll-view/ScrollView'
 import DialogHeader from './parts/DialogHeader'
@@ -60,7 +61,7 @@ export default function DialogContent({
     alignContent = variant === 'information' ? 'left' : 'centered'
   }
 
-  const innerParams = {
+  const contentParams = {
     className: classnames(
       !isTrue(preventCoreStyle) && 'dnb-core-style',
 
@@ -107,51 +108,55 @@ export default function DialogContent({
     hideDecline,
   }
 
+  validateDOMAttributes({}, contentParams)
+
   return (
-    <ScrollView {...innerParams}>
-      <div
-        tabIndex={-1}
-        className="dnb-dialog__inner dnb-no-focus"
-        ref={context?.contentRef}
-      >
-        {!navExists && <DialogNavigation>{navContent}</DialogNavigation>}
+    <div {...contentParams}>
+      <ScrollView ref={context?.scrollRef}>
+        <div
+          tabIndex={-1}
+          className="dnb-dialog__inner dnb-no-focus"
+          ref={context?.contentRef}
+        >
+          {!navExists && <DialogNavigation>{navContent}</DialogNavigation>}
 
-        {icon && (
-          <div className="dnb-dialog__icon">
-            <IconPrimary
-              border
-              key="dialog-icon"
-              icon={icon}
-              aria-hidden
-              className={classnames(
-                'dnb-dialog__icon__primary',
-                'dnb-dialog__icon--' + confirmType
-              )}
-            />
-          </div>
-        )}
+          {icon && (
+            <div className="dnb-dialog__icon">
+              <IconPrimary
+                border
+                key="dialog-icon"
+                icon={icon}
+                aria-hidden
+                className={classnames(
+                  'dnb-dialog__icon__primary',
+                  'dnb-dialog__icon--' + confirmType
+                )}
+              />
+            </div>
+          )}
+
+          {!headerExists && (
+            <DialogHeader
+              title={context?.title}
+              size={variant === 'information' ? 'x-large' : 'large'}
+            >
+              {headerContent}
+            </DialogHeader>
+          )}
 
-        {!headerExists && (
-          <DialogHeader
-            title={context?.title}
-            size={variant === 'information' ? 'x-large' : 'large'}
+          <div
+            id={context?.contentId + '-content'}
+            className="dnb-dialog__content"
           >
-            {headerContent}
-          </DialogHeader>
-        )}
+            {description}
+            {content}
+          </div>
 
-        <div
-          id={context?.contentId + '-content'}
-          className="dnb-dialog__content"
-        >
-          {description}
-          {content}
+          {variant === 'confirmation' && !actionExists && (
+            <DialogAction {...dialogActionProps} />
+          )}
         </div>
-
-        {variant === 'confirmation' && !actionExists && (
-          <DialogAction {...dialogActionProps} />
-        )}
-      </div>
-    </ScrollView>
+      </ScrollView>
+    </div>
   )
 }