From 31c6d13fdf227b055aea38100a640f06be8b9946 Mon Sep 17 00:00:00 2001 From: Ajay Bura <32841439+ajbura@users.noreply.github.com> Date: Fri, 12 Sep 2025 17:22:51 +0530 Subject: [PATCH] fix ctrl + k hotkey not working for browser with some extensions (#2481) --- index.html | 1 + package-lock.json | 8 ++-- package.json | 2 +- src/app/features/room/RoomView.tsx | 5 +-- src/app/features/search/Search.tsx | 5 +-- src/app/pages/App.tsx | 61 +++++++++++++++--------------- 6 files changed, 40 insertions(+), 42 deletions(-) diff --git a/index.html b/index.html index 9196cf3d..2eefeee2 100644 --- a/index.html +++ b/index.html @@ -90,6 +90,7 @@ window.global ||= window;
+
diff --git a/package-lock.json b/package-lock.json index 34a390f7..4aacff72 100644 --- a/package-lock.json +++ b/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", - "resolved": "https://registry.npmjs.org/folds/-/folds-2.2.0.tgz", - "integrity": "sha512-uOfck5eWEIK11rhOAEdSoPIvMXwv+D1Go03pxSAKezWVb+uRoBdmE6LEqiLOF+ac4DGmZRMPvpdDsXCg7EVNIg==", + "version": "2.3.0", + "resolved": "https://registry.npmjs.org/folds/-/folds-2.3.0.tgz", + "integrity": "sha512-1KoM21jrg5daxvKrmSY0V04wa946KlNT0z6h017Rsnw2fdtNC6J0f34Ce5GF46Tzi00gZ/7SvCDXMzW/7e5s0w==", "license": "Apache-2.0", "peerDependencies": { "@vanilla-extract/css": "1.9.2", diff --git a/package.json b/package.json index 0c06993e..5a2356f4 100644 --- a/package.json +++ b/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", diff --git a/src/app/features/room/RoomView.tsx b/src/app/features/room/RoomView.tsx index 2a4c710e..0f837594 100644 --- a/src/app/features/room/RoomView.tsx +++ b/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 lastNode = document.body.lastElementChild; - if (lastNode && !lastNode.hasAttribute('data-last-node')) { + const portalContainer = document.getElementById('portalContainer'); + if (portalContainer && portalContainer.children.length > 0) { return; } if (shouldFocusMessageField(evt) || isKeyHotkey('mod+v', evt)) { diff --git a/src/app/features/search/Search.tsx b/src/app/features/search/Search.tsx index aaf51a17..fcd6233a 100644 --- a/src/app/features/search/Search.tsx +++ b/src/app/features/search/Search.tsx @@ -434,9 +434,8 @@ export function SearchModalRenderer() { return; } - // means some menu or modal window is open - const lastNode = document.body.lastElementChild; - if (lastNode && !lastNode.hasAttribute('data-last-node')) { + const portalContainer = document.getElementById('portalContainer'); + if (portalContainer && portalContainer.children.length > 0) { return; } setOpen(true); diff --git a/src/app/pages/App.tsx b/src/app/pages/App.tsx index 935790ac..0a919b57 100644 --- a/src/app/pages/App.tsx +++ b/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 ( - - - } - error={(err, retry, ignore) => ( - - )} - > - {(clientConfig) => ( - - - - - - - - - )} - - - + + + + + + } + error={(err, retry, ignore) => ( + + )} + > + {(clientConfig) => ( + + + + + + + + + )} + + + + + + ); }