fix ctrl + k hotkey not working for browser with some extensions (#2481)

index.html

@@ -90,6 +90,7 @@
       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.2.0",
+        "folds": "2.3.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.2.0",
+      "version": "2.3.0",
-      "resolved": "https://registry.npmjs.org/folds/-/folds-2.2.0.tgz",
+      "resolved": "https://registry.npmjs.org/folds/-/folds-2.3.0.tgz",
-      "integrity": "sha512-uOfck5eWEIK11rhOAEdSoPIvMXwv+D1Go03pxSAKezWVb+uRoBdmE6LEqiLOF+ac4DGmZRMPvpdDsXCg7EVNIg==",
+      "integrity": "sha512-1KoM21jrg5daxvKrmSY0V04wa946KlNT0z6h017Rsnw2fdtNC6J0f34Ce5GF46Tzi00gZ/7SvCDXMzW/7e5s0w==",
       "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.2.0",
+    "folds": "2.3.0",
     "html-dom-parser": "4.0.0",
     "html-react-parser": "4.2.0",
     "i18next": "23.12.2",

src/app/features/room/RoomView.tsx

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

src/app/features/search/Search.tsx

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

src/app/pages/App.tsx

@@ -1,5 +1,6 @@
-import React, { useEffect } from 'react';
+import React 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';
@@ -13,41 +14,39 @@ 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();
 
-  useLastNodeToDetectReactPortalEntry();
+  const portalContainer = document.getElementById('portalContainer') ?? undefined;
 
   return (
-    <ScreenSizeProvider value={screenSize}>
+    <TooltipContainerProvider value={portalContainer}>
-      <FeatureCheck>
+      <PopOutContainerProvider value={portalContainer}>
-        <ClientConfigLoader
+        <OverlayContainerProvider value={portalContainer}>
-          fallback={() => <ConfigConfigLoading />}
+          <ScreenSizeProvider value={screenSize}>
-          error={(err, retry, ignore) => (
+            <FeatureCheck>
-            <ConfigConfigError error={err} retry={retry} ignore={ignore} />
+              <ClientConfigLoader
-          )}
+                fallback={() => <ConfigConfigLoading />}
-        >
+                error={(err, retry, ignore) => (
-          {(clientConfig) => (
+                  <ConfigConfigError error={err} retry={retry} ignore={ignore} />
-            <ClientConfigProvider value={clientConfig}>
+                )}
-              <QueryClientProvider client={queryClient}>
+              >
-                <JotaiProvider>
+                {(clientConfig) => (
-                  <RouterProvider router={createRouter(clientConfig, screenSize)} />
+                  <ClientConfigProvider value={clientConfig}>
-                </JotaiProvider>
+                    <QueryClientProvider client={queryClient}>
-                <ReactQueryDevtools initialIsOpen={false} />
+                      <JotaiProvider>
-              </QueryClientProvider>
+                        <RouterProvider router={createRouter(clientConfig, screenSize)} />
-            </ClientConfigProvider>
+                      </JotaiProvider>
-          )}
+                      <ReactQueryDevtools initialIsOpen={false} />
-        </ClientConfigLoader>
+                    </QueryClientProvider>
-      </FeatureCheck>
+                  </ClientConfigProvider>
-    </ScreenSizeProvider>
+                )}
+              </ClientConfigLoader>
+            </FeatureCheck>
+          </ScreenSizeProvider>
+        </OverlayContainerProvider>
+      </PopOutContainerProvider>
+    </TooltipContainerProvider>
   );
 }