runfix: Correctly open user modal container (#13977)

wireapp · Oct 26, 2022 · c2b8dd3 · c2b8dd3
1 parent b3cfe4f
commit c2b8dd3
Show file tree

Hide file tree

Showing 3 changed files with 18 additions and 6 deletions.
diff --git a/src/page/index.html b/src/page/index.html
@@ -22,6 +22,8 @@
 
     #include('loading.htm')
 
+    <div id="user-modal-container"></div>
+
     <script src="./config.js?{{@config.VERSION}}"></script>
     <script src="./min/dexie.js?{{@config.VERSION}}"></script>
     <script src="./min/vendor.js?{{@config.VERSION}}"></script>

diff --git a/src/script/page/AppMain.tsx b/src/script/page/AppMain.tsx
@@ -122,7 +122,6 @@ const AppContainer: FC<AppContainerProps> = ({root}) => {
           />
 
           {/*The order of these elements matter to show proper modals stack upon each other*/}
-          <div id="user-modal-container"></div>
           <PrimaryModalComponent />
           <GroupCreationModal userState={userState} teamState={teamState} />
         </main>

diff --git a/src/script/util/renderElement.ts b/src/script/util/renderElement.ts
@@ -21,6 +21,10 @@ import React from 'react';
 
 import {createRoot, Root} from 'react-dom/client';
 
+import {getLogger} from './Logger';
+
+const logger = getLogger('renderElement');
+
 const roots = new Map<
   string,
   {
@@ -60,25 +64,32 @@ const renderElement =
     style?: Partial<CSSStyleDeclaration>,
   ) =>
   (props: T) => {
-    const currentElementId = parentElementId;
+    cleanUpElement(parentElementId);
+
+    const parentElement = document.getElementById(parentElementId);
+
+    if (!parentElement) {
+      logger.warn(`Unable to find element with id: ${parentElementId}`);
+
+      return;
+    }
 
-    cleanUpElement(currentElementId);
     const elementContainer = document.createElement('div');
 
     if (style) {
       elementContainer.setAttribute('style', generateStyleString(style));
     }
 
-    document.getElementById(currentElementId)?.appendChild(elementContainer);
+    parentElement.appendChild(elementContainer);
     const reactRoot = createRoot(elementContainer);
 
-    roots.set(currentElementId, {
+    roots.set(parentElementId, {
       elementContainer,
       reactRoot,
     });
 
     const onClose = () => {
-      cleanUpElement(currentElementId);
+      cleanUpElement(parentElementId);
       props.onClose?.();
     };