From 8275e1ad0f38c18a049b3ae588a44fdcdb0c66cf Mon Sep 17 00:00:00 2001
From: Damian Maslanka <damian.maslanka5@gmail.com>
Date: Thu, 12 Jun 2025 22:32:17 +0200
Subject: [PATCH] Fix showing three modals after pressing ctrl+k or / to open
 the search modal for the first time

---
 src/theme/SearchBar/index.js | 20 ++++++++++++++------
 1 file changed, 14 insertions(+), 6 deletions(-)

diff --git a/src/theme/SearchBar/index.js b/src/theme/SearchBar/index.js
index 0340b23acb0..069689645be 100644
--- a/src/theme/SearchBar/index.js
+++ b/src/theme/SearchBar/index.js
@@ -17,6 +17,7 @@ import { useEffect } from 'react';
 import { getGoogleAnalyticsUserIdFromBrowserCookie } from '../../lib/google/google'
 
 let DocSearchModal = null;
+let searchContainer = null;
 
 function Hit({ hit, children }) {
   const handleClick = () => {
@@ -69,7 +70,6 @@ function DocSearch({ contextualSearch, externalUrlRegex, ...props }) {
     clickAnalytics: true,
   };
   const history = useHistory();
-  const searchContainer = useRef(null);
   const searchButtonRef = useRef(null);
   const [isOpen, setIsOpen] = useState(false);
   const [initialQuery, setInitialQuery] = useState(undefined);
@@ -100,18 +100,26 @@ function DocSearch({ contextualSearch, externalUrlRegex, ...props }) {
 
   const onOpen = useCallback(() => {
     importDocSearchModalIfNeeded().then(() => {
-      searchContainer.current = document.createElement('div');
+      // searchContainer is not null here when the modal is already open
+      // this check is needed because ctrl + k shortcut was handled by another instance of SearchBar component
+      if (searchContainer) {
+        return;
+      }
+
+      searchContainer = document.createElement('div');
       document.body.insertBefore(
-        searchContainer.current,
+        searchContainer,
         document.body.firstChild,
       );
+
       setIsOpen(true);
     });
   }, [importDocSearchModalIfNeeded, setIsOpen]);
 
   const onClose = useCallback(() => {
     setIsOpen(false);
-    searchContainer.current?.remove();
+    searchContainer?.remove();
+    searchContainer = null;;
   }, [setIsOpen]);
 
   const onInput = useCallback(
@@ -204,7 +212,7 @@ function DocSearch({ contextualSearch, externalUrlRegex, ...props }) {
 
       {isOpen &&
         DocSearchModal &&
-        searchContainer.current &&
+        searchContainer &&
         createPortal(
           <DocSearchModal
             onClose={onClose}
@@ -223,7 +231,7 @@ function DocSearch({ contextualSearch, externalUrlRegex, ...props }) {
             placeholder={translations.placeholder}
             translations={translations.modal}
           />,
-          searchContainer.current,
+          searchContainer,
         )}
     </>
   );