From f25cc56ddb8eb20116f6d5038d1400539838170e Mon Sep 17 00:00:00 2001
From: Chi Vinh Le <vinh@wikiwi.io>
Date: Tue, 19 Dec 2017 19:15:45 +0100
Subject: [PATCH] Use Portal to put dialogs to the end of the document

---
 client/coral-ui/components/Dialog.css |  1 -
 client/coral-ui/components/Dialog.js  | 17 ++++++++++-------
 package.json                          |  1 +
 yarn.lock                             |  6 ++++++
 4 files changed, 17 insertions(+), 8 deletions(-)

diff --git a/client/coral-ui/components/Dialog.css b/client/coral-ui/components/Dialog.css
index b5872c12c..9e7700299 100644
--- a/client/coral-ui/components/Dialog.css
+++ b/client/coral-ui/components/Dialog.css
@@ -1,4 +1,3 @@
 
 .dialog {
-  position: fixed;
 }
diff --git a/client/coral-ui/components/Dialog.js b/client/coral-ui/components/Dialog.js
index d847efaea..bba386026 100644
--- a/client/coral-ui/components/Dialog.js
+++ b/client/coral-ui/components/Dialog.js
@@ -3,6 +3,7 @@ import PropTypes from 'prop-types';
 import dialogPolyfill from 'dialog-polyfill';
 import 'dialog-polyfill/dialog-polyfill.css';
 import styles from './Dialog.css';
+import {Portal} from 'react-portal';
 
 export default class Dialog extends Component {
   static propTypes = {
@@ -53,13 +54,15 @@ export default class Dialog extends Component {
     const {children, className = '', onClose, onCancel, open, ...rest} = this.props; // eslint-disable-line
 
     return (
-      <dialog
-        ref={(el) => { this.dialog = el; }}
-        className={`mdl-dialog ${className} ${styles.dialog}`}
-        {...rest}
-      >
-        {children}
-      </dialog>
+      <Portal>
+        <dialog
+          ref={(el) => { this.dialog = el; }}
+          className={`mdl-dialog ${className} ${styles.dialog}`}
+          {...rest}
+        >
+          {children}
+        </dialog>
+      </Portal>
     );
   }
 }
diff --git a/package.json b/package.json
index da084504d..de3b617a2 100644
--- a/package.json
+++ b/package.json
@@ -160,6 +160,7 @@
     "react-mdl": "^1.7.2",
     "react-mdl-selectfield": "^0.2.0",
     "react-paginate": "^5.0.0",
+    "react-portal": "^4.1.2",
     "react-recaptcha": "^2.2.6",
     "react-redux": "^4.4.5",
     "react-router": "^3.0.0",
diff --git a/yarn.lock b/yarn.lock
index 282e501e1..c380bcd3a 100644
--- a/yarn.lock
+++ b/yarn.lock
@@ -7473,6 +7473,12 @@ react-paginate@^5.0.0:
     prop-types "^15.6.0"
     react-addons-create-fragment "^15.0.0"
 
+react-portal@^4.1.2:
+  version "4.1.2"
+  resolved "https://registry.yarnpkg.com/react-portal/-/react-portal-4.1.2.tgz#7f28f3c8c2ed5c541907c0ed0f24e8996acf627f"
+  dependencies:
+    prop-types "^15.5.8"
+
 react-recaptcha@^2.2.6:
   version "2.3.5"
   resolved "https://registry.yarnpkg.com/react-recaptcha/-/react-recaptcha-2.3.5.tgz#a5db337125bb00fb13c2fa2e4ebfbe8b0cd06bb7"