Render ModalAlert into element which is appended on mount

1 files changed, 18 insertions, 4 deletions

diff --git a/gui/src/renderer/components/Modal.tsx b/gui/src/renderer/components/Modal.tsx
index b4c6ace833..c00a1be466 100644
--- a/gui/src/renderer/components/Modal.tsx
+++ b/gui/src/renderer/components/Modal.tsx
@@ -105,15 +105,29 @@ interface IModalAlertProps {
 }
 
 export class ModalAlert extends Component<IModalAlertProps> {
-  public render() {
+  private element = document.createElement('div');
+  private modalContainer?: Element;
+
+  public componentDidMount() {
     const modalContainer = document.getElementById(MODAL_CONTAINER_ID);
-    if (modalContainer !== null) {
-      return ReactDOM.createPortal(this.renderModal(), modalContainer);
+    if (modalContainer) {
+      this.modalContainer = modalContainer;
+      modalContainer.appendChild(this.element);
     } else {
-      throw Error('Modal container not found when rendering modal');
+      throw Error('Modal container not found when mounting modal');
+    }
+  }
+
+  public componentWillUnmount() {
+    if (this.modalContainer) {
+      this.modalContainer.removeChild(this.element);
     }
   }
 
+  public render() {
+    return ReactDOM.createPortal(this.renderModal(), this.element);
+  }
+
   private renderModal() {
     return (
       <ModalBackground>