Merge branch 'render-modal-in-portal'

2 files changed, 37 insertions, 23 deletions

diff --git a/gui/src/renderer/components/Modal.tsx b/gui/src/renderer/components/Modal.tsx
index 31eb8eec24..db7aca982b 100644
--- a/gui/src/renderer/components/Modal.tsx
+++ b/gui/src/renderer/components/Modal.tsx
@@ -1,8 +1,11 @@
 import * as React from 'react';
+import ReactDOM from 'react-dom';
 import { Component, Styles, Text, View } from 'reactxp';
 import { colors } from '../../config.json';
 import ImageView from './ImageView';
 
+const MODAL_CONTAINER_ID = 'modalContainer';
+
 const styles = {
   modalAlertBackground: Styles.createViewStyle({
     flex: 1,
@@ -82,7 +85,11 @@ interface IModalContainerProps {
 }
 
 export const ModalContainer: React.FC = (props: IModalContainerProps) => {
-  return <div style={{ position: 'relative', flex: 1 }}>{props.children}</div>;
+  return (
+    <div id={MODAL_CONTAINER_ID} style={{ position: 'relative', flex: 1 }}>
+      <ModalContent>{props.children}</ModalContent>
+    </div>
+  );
 };
 
 export enum ModalAlertType {
@@ -98,6 +105,15 @@ interface IModalAlertProps {
 
 export class ModalAlert extends Component<IModalAlertProps> {
   public render() {
+    const modalContainer = document.getElementById(MODAL_CONTAINER_ID);
+    if (modalContainer !== null) {
+      return ReactDOM.createPortal(this.renderModal(), modalContainer);
+    } else {
+      throw Error('Modal container not found when rendering modal');
+    }
+  }
+
+  private renderModal() {
     return (
       <ModalBackground>
         <View style={styles.modalAlertBackground}>
diff --git a/gui/src/renderer/components/Support.tsx b/gui/src/renderer/components/Support.tsx
index f8617234aa..18ef6627ac 100644
--- a/gui/src/renderer/components/Support.tsx
+++ b/gui/src/renderer/components/Support.tsx
@@ -5,7 +5,7 @@ import { messages } from '../../shared/gettext';
 import * as AppButton from './AppButton';
 import ImageView from './ImageView';
 import { Container, Layout } from './Layout';
-import { ModalAlert, ModalAlertType, ModalContainer, ModalContent } from './Modal';
+import { ModalAlert, ModalAlertType, ModalContainer } from './Modal';
 import { BackBarItem, NavigationBar, NavigationItems } from './NavigationBar';
 import SettingsHeader, { HeaderSubTitle, HeaderTitle } from './SettingsHeader';
 import styles from './SupportStyles';
@@ -129,30 +129,28 @@ export default class Support extends Component<ISupportProps, ISupportState> {
     const content = this.renderContent();
 
     return (
-      <Layout>
-        <Container>
-          <ModalContainer>
-            <ModalContent>
-              <View style={styles.support}>
-                <NavigationBar>
-                  <NavigationItems>
-                    <BackBarItem action={this.props.onClose}>
-                      {// TRANSLATORS: Back button in navigation bar
-                      messages.pgettext('navigation-bar', 'Settings')}
-                    </BackBarItem>
-                  </NavigationItems>
-                </NavigationBar>
-                <View style={styles.support__container}>
-                  {header}
-                  {content}
-                </View>
+      <ModalContainer>
+        <Layout>
+          <Container>
+            <View style={styles.support}>
+              <NavigationBar>
+                <NavigationItems>
+                  <BackBarItem action={this.props.onClose}>
+                    {// TRANSLATORS: Back button in navigation bar
+                    messages.pgettext('navigation-bar', 'Settings')}
+                  </BackBarItem>
+                </NavigationItems>
+              </NavigationBar>
+              <View style={styles.support__container}>
+                {header}
+                {content}
               </View>
-            </ModalContent>
+            </View>
             {sendState === SendState.Confirm && this.renderNoEmailDialog()}
             {showOutdatedVersionWarning && this.renderOutdateVersionWarningDialog()}
-          </ModalContainer>
-        </Container>
-      </Layout>
+          </Container>
+        </Layout>
+      </ModalContainer>
     );
   }