fix(docsearch): allow a single instance to open

If a website uses two DocSearch instances (e.g., one for mobile and one for desktop), it resulted in a double modal being show when hitting `Ctrl + K`.

This is fixed by checking that the active DocSearch CSS class is not applied on `body` before opening the modal.

Author: francoischalifour

src/useDocSearchKeyboardEvents.ts

@@ -29,6 +29,13 @@ export function useDocSearchKeyboardEvents({
 }: UseDocSearchKeyboardEventsProps) {
   React.useEffect(() => {
     function onKeyDown(event: KeyboardEvent) {
+      function open() {
+        // We check that no other DocSearch modal is showing before opening
+        // another one.
+        if (!document.body.classList.contains('DocSearch--active')) {
+          onOpen();
+        }
+      }
       if (
         (event.keyCode === 27 && isOpen) ||
         // The `Cmd+K` shortcut both opens and closes the modal.
@@ -41,8 +48,8 @@ export function useDocSearchKeyboardEvents({
 
         if (isOpen) {
           onClose();
-        } else {
-          onOpen();
+        } else if (!document.body.classList.contains('DocSearch--active')) {
+          open();
         }
       }