index.html

@@ -90,7 +90,6 @@
       window.global ||= window;
     </script>
     <div id="root"></div>
-    <div id="portalContainer"></div>
     <script type="module" src="./src/index.tsx"></script>
   </body>
 </html>

package-lock.json

@@ -32,7 +32,7 @@
         "emojibase-data": "15.3.2",
         "file-saver": "2.0.5",
         "focus-trap-react": "10.0.2",
-        "folds": "2.3.0",
+        "folds": "2.2.0",
         "html-dom-parser": "4.0.0",
         "html-react-parser": "4.2.0",
         "i18next": "23.12.2",
@@ -7163,9 +7163,9 @@
       }
     },
     "node_modules/folds": {
-      "version": "2.3.0",
+      "version": "2.2.0",
-      "resolved": "https://registry.npmjs.org/folds/-/folds-2.3.0.tgz",
+      "resolved": "https://registry.npmjs.org/folds/-/folds-2.2.0.tgz",
-      "integrity": "sha512-1KoM21jrg5daxvKrmSY0V04wa946KlNT0z6h017Rsnw2fdtNC6J0f34Ce5GF46Tzi00gZ/7SvCDXMzW/7e5s0w==",
+      "integrity": "sha512-uOfck5eWEIK11rhOAEdSoPIvMXwv+D1Go03pxSAKezWVb+uRoBdmE6LEqiLOF+ac4DGmZRMPvpdDsXCg7EVNIg==",
       "license": "Apache-2.0",
       "peerDependencies": {
         "@vanilla-extract/css": "1.9.2",

package.json

@@ -43,7 +43,7 @@
     "emojibase-data": "15.3.2",
     "file-saver": "2.0.5",
     "focus-trap-react": "10.0.2",
-    "folds": "2.3.0",
+    "folds": "2.2.0",
     "html-dom-parser": "4.0.0",
     "html-react-parser": "4.2.0",
     "i18next": "23.12.2",

src/app/features/common-settings/general/RoomAddress.tsx

@@ -329,7 +329,7 @@ function LocalAddressesList({
             <Box shrink="No">
               <Checkbox
                 checked={selected}
-                onClick={() => toggleSelect(alias)}
+                onChange={() => toggleSelect(alias)}
                 size="50"
                 variant="Primary"
                 disabled={loading}

src/app/features/room/RoomView.tsx

@@ -79,8 +79,9 @@ export function RoomView({ room, eventId }: { room: Room; eventId?: string }) {
     useCallback(
       (evt) => {
         if (editableActiveElement()) return;
-        const portalContainer = document.getElementById('portalContainer');
+        // means some menu or modal window is open
-        if (portalContainer && portalContainer.children.length > 0) {
+        const lastNode = document.body.lastElementChild;
+        if (lastNode && !lastNode.hasAttribute('data-last-node')) {
           return;
         }
         if (shouldFocusMessageField(evt) || isKeyHotkey('mod+v', evt)) {

src/app/features/search/Search.tsx

@@ -434,8 +434,9 @@ export function SearchModalRenderer() {
             return;
           }
 
-          const portalContainer = document.getElementById('portalContainer');
+          // means some menu or modal window is open
-          if (portalContainer && portalContainer.children.length > 0) {
+          const lastNode = document.body.lastElementChild;
+          if (lastNode && !lastNode.hasAttribute('data-last-node')) {
             return;
           }
           setOpen(true);

src/app/pages/App.tsx

@@ -1,6 +1,5 @@
-import React from 'react';
+import React, { useEffect } from 'react';
 import { Provider as JotaiProvider } from 'jotai';
-import { OverlayContainerProvider, PopOutContainerProvider, TooltipContainerProvider } from 'folds';
 import { RouterProvider } from 'react-router-dom';
 import { QueryClient, QueryClientProvider } from '@tanstack/react-query';
 import { ReactQueryDevtools } from '@tanstack/react-query-devtools';
@@ -14,39 +13,41 @@ import { ScreenSizeProvider, useScreenSize } from '../hooks/useScreenSize';
 
 const queryClient = new QueryClient();
 
+const useLastNodeToDetectReactPortalEntry = () => {
+  useEffect(() => {
+    const lastDiv = document.createElement('div');
+    lastDiv.setAttribute('data-last-node', 'true');
+    document.body.appendChild(lastDiv);
+  }, []);
+};
+
 function App() {
   const screenSize = useScreenSize();
 
-  const portalContainer = document.getElementById('portalContainer') ?? undefined;
+  useLastNodeToDetectReactPortalEntry();
 
   return (
-    <TooltipContainerProvider value={portalContainer}>
+    <ScreenSizeProvider value={screenSize}>
-      <PopOutContainerProvider value={portalContainer}>
+      <FeatureCheck>
-        <OverlayContainerProvider value={portalContainer}>
+        <ClientConfigLoader
-          <ScreenSizeProvider value={screenSize}>
+          fallback={() => <ConfigConfigLoading />}
-            <FeatureCheck>
+          error={(err, retry, ignore) => (
-              <ClientConfigLoader
+            <ConfigConfigError error={err} retry={retry} ignore={ignore} />
-                fallback={() => <ConfigConfigLoading />}
+          )}
-                error={(err, retry, ignore) => (
+        >
-                  <ConfigConfigError error={err} retry={retry} ignore={ignore} />
+          {(clientConfig) => (
-                )}
+            <ClientConfigProvider value={clientConfig}>
-              >
+              <QueryClientProvider client={queryClient}>
-                {(clientConfig) => (
+                <JotaiProvider>
-                  <ClientConfigProvider value={clientConfig}>
+                  <RouterProvider router={createRouter(clientConfig, screenSize)} />
-                    <QueryClientProvider client={queryClient}>
+                </JotaiProvider>
-                      <JotaiProvider>
+                <ReactQueryDevtools initialIsOpen={false} />
-                        <RouterProvider router={createRouter(clientConfig, screenSize)} />
+              </QueryClientProvider>
-                      </JotaiProvider>
+            </ClientConfigProvider>
-                      <ReactQueryDevtools initialIsOpen={false} />
+          )}
-                    </QueryClientProvider>
+        </ClientConfigLoader>
-                  </ClientConfigProvider>
+      </FeatureCheck>
-                )}
+    </ScreenSizeProvider>
-              </ClientConfigLoader>
-            </FeatureCheck>
-          </ScreenSizeProvider>
-        </OverlayContainerProvider>
-      </PopOutContainerProvider>
-    </TooltipContainerProvider>
   );
 }