From 9e9b3b14d7a6a3291bc65ef4c721e26da41cff66 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?Maren=20S=C3=BCwer?= <maren.suewer@cloudogu.com>
Date: Fri, 1 Feb 2019 08:47:38 +0100
Subject: [PATCH] add extra root for modals and use it

---
 .../ui-components/src/modals/ConfirmAlert.js  | 30 ++++---------------
 scm-ui/public/index.mustache                  |  2 ++
 2 files changed, 8 insertions(+), 24 deletions(-)

diff --git a/scm-ui-components/packages/ui-components/src/modals/ConfirmAlert.js b/scm-ui-components/packages/ui-components/src/modals/ConfirmAlert.js
index ad296cee6b..416853cffa 100644
--- a/scm-ui-components/packages/ui-components/src/modals/ConfirmAlert.js
+++ b/scm-ui-components/packages/ui-components/src/modals/ConfirmAlert.js
@@ -1,8 +1,6 @@
 // @flow
-//modified from https://github.com/GA-MO/react-confirm-alert
-
 import * as React from "react";
-import { render, unmountComponentAtNode } from "react-dom";
+import ReactDOM from "react-dom";
 import "./ConfirmAlert.css";
 
 type Button = {
@@ -25,7 +23,7 @@ class ConfirmAlert extends React.Component<Props> {
   };
 
   close = () => {
-    removeElementReconfirm();
+    ReactDOM.unmountComponentAtNode(document.getElementById("modalRoot"));
   };
 
   render() {
@@ -67,27 +65,11 @@ class ConfirmAlert extends React.Component<Props> {
   }
 }
 
-function createElementReconfirm(properties: Props) {
-  const divTarget = document.createElement("div");
-  divTarget.id = "react-confirm-alert";
-  if (document.body) {
-    document.body.appendChild(divTarget);
-    render(<ConfirmAlert {...properties} />, divTarget);
-  }
-}
-
-function removeElementReconfirm() {
-  const target = document.getElementById("react-confirm-alert");
-  if (target) {
-    unmountComponentAtNode(target);
-    if (target.parentNode) {
-      target.parentNode.removeChild(target);
-    }
-  }
-}
-
 export function confirmAlert(properties: Props) {
-  createElementReconfirm(properties);
+  const root = document.getElementById("modalRoot");
+  if(root){
+    ReactDOM.render(<ConfirmAlert {...properties}/>, root);
+  }
 }
 
 export default ConfirmAlert;
diff --git a/scm-ui/public/index.mustache b/scm-ui/public/index.mustache
index 590b5e3cdb..75efc78088 100644
--- a/scm-ui/public/index.mustache
+++ b/scm-ui/public/index.mustache
@@ -21,6 +21,8 @@
       You need to enable JavaScript to run this app.
     </noscript>
     <div id="root"></div>
+    <div id="modalRoot"></div>
+
     <!--
       This HTML file is a template.
       If you open it directly in the browser, you will see an empty page.