fix(Modal): prevent close on click content

8base · Sep 27, 2019 · 3e1ebf8 · 3e1ebf8
1 parent d010f1c
commit 3e1ebf8
Show file tree

Hide file tree

Showing 4 changed files with 12 additions and 3 deletions.
diff --git a/src/components/Dialog/Dialog.js b/src/components/Dialog/Dialog.js
@@ -47,6 +47,7 @@ const Dialog = ({
       args={ args }
       shouldCloseOnOverlayClick={ shouldCloseOnOverlayClick }
       shouldCloseOnEscPress={ shouldCloseOnEscPress }
+      stretch={ stretch }
     >
       {
         ({ args, onClose }) => (

diff --git a/src/components/Dialog/Dialog.theme.js b/src/components/Dialog/Dialog.theme.js
@@ -34,7 +34,7 @@ const [DialogTag, themeDialog] = createThemeTag('dialog', {
     display: 'flex',
     flexDirection: 'column',
     justifyContent: 'center',
-    margin: '40px 0',
+    maxHeight: 'calc(100vh - 80px)',
   },
   modifiers: {
     stretch: {

diff --git a/src/components/Modal/Modal.js b/src/components/Modal/Modal.js
@@ -63,6 +63,10 @@ class Modal extends PureComponent<ModalProps, ModalState> {
     }
   };
 
+  onModalMouseDown = (event) => {
+    event.stopPropagation();
+  };
+
   render() {
     const { children, isOpen, ...rest } = this.props;
 
@@ -78,7 +82,7 @@ class Modal extends PureComponent<ModalProps, ModalState> {
             <ModalTag
               modifiers={ rest }
               tagName="div"
-              onMouseDown={ this.onOverlayMouseDown }
+              onMouseDown={ this.onModalMouseDown }
             >
               { typeof children === 'function' ? children(rest) : children }
             </ModalTag>

diff --git a/src/components/Modal/Modal.theme.js b/src/components/Modal/Modal.theme.js
@@ -21,12 +21,16 @@ const [OverlayTag, themeOverlay] = createThemeTag(`${name}Overlay`, ({ Z_INDEX }
 
 const [ModalTag, themeModal] = createThemeTag(name, {
   root: {
-    height: '100%',
     display: 'flex',
     flexDirection: 'column',
     alignItems: 'center',
     justifyContent: 'center',
   },
+  modifiers: {
+    stretch: {
+      height: '100%',
+    },
+  },
 });
 
 const theme = {