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/common-settings/general/RoomAddress.tsx

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

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,20 +14,15 @@ 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 (
+    <TooltipContainerProvider value={portalContainer}>
+      <PopOutContainerProvider value={portalContainer}>
+        <OverlayContainerProvider value={portalContainer}>
           <ScreenSizeProvider value={screenSize}>
             <FeatureCheck>
               <ClientConfigLoader
@@ -48,6 +44,9 @@ function App() {
               </ClientConfigLoader>
             </FeatureCheck>
           </ScreenSizeProvider>
+        </OverlayContainerProvider>
+      </PopOutContainerProvider>
+    </TooltipContainerProvider>
   );
 }