From 5aeb27ee6f3d180fe94e5d70dcb035f90d8a004e Mon Sep 17 00:00:00 2001
From: Rishabh <me@rsbh.dev>
Date: Thu, 9 Jul 2026 13:20:39 +0530
Subject: [PATCH] fix: prevent Cmd+K from opening duplicate search dialogs

The Search component bundled trigger, dialog, and the Cmd+K keydown
listener together. The default theme mounts it twice (mobile header and
sidebar header), so each keypress opened two stacked dialogs.

Split it into SearchProvider (shared open state), Search (trigger-only
button), and SearchDialog (single dialog + single keydown listener).
The provider and dialog are mounted once in App, so themes only render
trigger buttons. Paper theme's hidden-trigger workaround is removed.

Co-Authored-By: Claude Fable 5 <noreply@anthropic.com>
---
 .../chronicle/src/components/ui/search.tsx    | 158 +++++++++++-------
 packages/chronicle/src/server/App.tsx         |  28 ++--
 .../src/themes/paper/Layout.module.css        |   4 -
 .../chronicle/src/themes/paper/Layout.tsx     |   2 -
 4 files changed, 111 insertions(+), 81 deletions(-)

diff --git a/packages/chronicle/src/components/ui/search.tsx b/packages/chronicle/src/components/ui/search.tsx
index 9b953630..95adc402 100644
--- a/packages/chronicle/src/components/ui/search.tsx
+++ b/packages/chronicle/src/components/ui/search.tsx
@@ -10,7 +10,16 @@ import { keepPreviousData, useQuery } from '@tanstack/react-query';
 import GithubSlugger from 'github-slugger';
 import { debounce } from 'lodash-es';
 import MiniSearch from 'minisearch';
-import { useCallback, useEffect, useMemo, useState, type ChangeEvent } from 'react';
+import {
+  createContext,
+  useCallback,
+  useContext,
+  useEffect,
+  useMemo,
+  useState,
+  type ChangeEvent,
+  type ReactNode
+} from 'react';
 import { useNavigate } from 'react-router';
 import { MethodBadge } from '@/components/api/method-badge';
 import { usePageContext } from '@/lib/page-context';
@@ -162,8 +171,43 @@ function buildSearchUrl(query: string, tag?: string): string {
   return qs ? `/api/search?${qs}` : '/api/search';
 }
 
-export function Search({ classNames }: SearchProps) {
+interface SearchContextValue {
+  open: boolean;
+  setOpen: React.Dispatch<React.SetStateAction<boolean>>;
+}
+
+const SearchContext = createContext<SearchContextValue | null>(null);
+
+export function SearchProvider({ children }: { children: ReactNode }) {
   const [open, setOpen] = useState(false);
+  const value = useMemo(() => ({ open, setOpen }), [open]);
+  return <SearchContext.Provider value={value}>{children}</SearchContext.Provider>;
+}
+
+function useSearch(): SearchContextValue {
+  const ctx = useContext(SearchContext);
+  if (!ctx) throw new Error('Search components must be used within <SearchProvider>');
+  return ctx;
+}
+
+export function Search({ classNames }: SearchProps) {
+  const { setOpen } = useSearch();
+
+  return (
+    <IconButton
+      size={3}
+      aria-label='Search'
+      title='Search (Ctrl/⌘K)'
+      onClick={() => setOpen(true)}
+      className={classNames?.trigger}
+    >
+      <MagnifyingGlassIcon width={16} height={16} />
+    </IconButton>
+  );
+}
+
+export function SearchDialog() {
+  const { open, setOpen } = useSearch();
   const [search, setSearch] = useState('');
   const [debouncedSearch, setDebouncedSearch] = useState('');
   const navigate = useNavigate();
@@ -228,67 +272,55 @@ export function Search({ classNames }: SearchProps) {
   const displayResults = deduplicateByUrl(data);
 
   return (
-    <>
-      <IconButton
-        size={3}
-        aria-label='Search'
-        title='Search (Ctrl/⌘K)'
-        onClick={() => setOpen(true)}
-        className={classNames?.trigger}
-      >
-        <MagnifyingGlassIcon width={16} height={16} />
-      </IconButton>
-
-      <Command.Dialog open={open} onOpenChange={setOpen}>
-        <Command.DialogContent className={styles.dialogContent}>
-          <Command items={displayResults}>
-            <Command.Input
-              placeholder='Search'
-              leadingIcon={<MagnifyingGlassIcon width={16} height={16} />}
-              value={search}
-              onChange={onSearchChange}
-              className={styles.input}
-            />
-
-            <Command.Content className={styles.list}>
-              {isLoading && displayResults.length === 0 && <Command.Empty>Loading...</Command.Empty>}
-              {!isLoading &&
-                search.length > 0 &&
-                displayResults.length === 0 && (
-                  <Command.Empty>No results found.</Command.Empty>
-                )}
-              {search.length === 0 &&
-                displayResults.length > 0 && (
-                  <Command.Group>
-                    <Command.Label>Suggestions</Command.Label>
-                    {displayResults.slice(0, 8).map((result) => (
-                      <Command.Item
-                        key={result.id}
-                        value={result.id}
-                        onClick={() => onSelect(result.url)}
-                        className={styles.item}
-                      >
-                        <SearchResultItem result={result} query="" />
-                      </Command.Item>
-                    ))}
-                  </Command.Group>
-                )}
-              {search.length > 0 &&
-                displayResults.map((result) => (
-                  <Command.Item
-                    key={result.id}
-                    value={result.id}
-                    onClick={() => onSelect(result.url)}
-                    className={styles.item}
-                  >
-                    <SearchResultItem result={result} query={search} />
-                  </Command.Item>
-                ))}
-            </Command.Content>
-          </Command>
-        </Command.DialogContent>
-      </Command.Dialog>
-    </>
+    <Command.Dialog open={open} onOpenChange={setOpen}>
+      <Command.DialogContent className={styles.dialogContent}>
+        <Command items={displayResults}>
+          <Command.Input
+            placeholder='Search'
+            leadingIcon={<MagnifyingGlassIcon width={16} height={16} />}
+            value={search}
+            onChange={onSearchChange}
+            className={styles.input}
+          />
+
+          <Command.Content className={styles.list}>
+            {isLoading && displayResults.length === 0 && <Command.Empty>Loading...</Command.Empty>}
+            {!isLoading &&
+              search.length > 0 &&
+              displayResults.length === 0 && (
+                <Command.Empty>No results found.</Command.Empty>
+              )}
+            {search.length === 0 &&
+              displayResults.length > 0 && (
+                <Command.Group>
+                  <Command.Label>Suggestions</Command.Label>
+                  {displayResults.slice(0, 8).map((result) => (
+                    <Command.Item
+                      key={result.id}
+                      value={result.id}
+                      onClick={() => onSelect(result.url)}
+                      className={styles.item}
+                    >
+                      <SearchResultItem result={result} query="" />
+                    </Command.Item>
+                  ))}
+                </Command.Group>
+              )}
+            {search.length > 0 &&
+              displayResults.map((result) => (
+                <Command.Item
+                  key={result.id}
+                  value={result.id}
+                  onClick={() => onSelect(result.url)}
+                  className={styles.item}
+                >
+                  <SearchResultItem result={result} query={search} />
+                </Command.Item>
+              ))}
+          </Command.Content>
+        </Command>
+      </Command.DialogContent>
+    </Command.Dialog>
   );
 }
 
diff --git a/packages/chronicle/src/server/App.tsx b/packages/chronicle/src/server/App.tsx
index f6dd2ed2..695c8a1c 100644
--- a/packages/chronicle/src/server/App.tsx
+++ b/packages/chronicle/src/server/App.tsx
@@ -4,6 +4,7 @@ import { ThemeProvider, Skeleton, Flex } from '@raystack/apsara';
 import { lazy, Suspense } from 'react';
 import { Navigate, useLocation } from 'react-router';
 import { AnalyticsProvider } from '@/components/analytics/AnalyticsProvider';
+import { SearchDialog, SearchProvider } from '@/components/ui/search';
 import { usePageContext } from '@/lib/page-context';
 import { resolveRoute, RouteType } from '@/lib/route-resolver';
 import type { ChronicleConfig } from '@/types';
@@ -38,18 +39,21 @@ export function App() {
       forcedTheme={themeConfig.forcedTheme}
     >
       <AnalyticsProvider config={config.analytics ?? { enabled: false }} appName={config.site.title}>
-        <RootHead config={config} />
-        <Suspense fallback={<PageFallback />}>
-          {isApi ? (
-            <ApiLayout>
-              <ApiPage slug={apiSlug} />
-            </ApiLayout>
-          ) : (
-            <DocsLayout hideSidebar={isLanding}>
-              {isLanding ? <LandingPage /> : <DocsPage slug={docsSlug} />}
-            </DocsLayout>
-          )}
-        </Suspense>
+        <SearchProvider>
+          <RootHead config={config} />
+          {config.search?.enabled && <SearchDialog />}
+          <Suspense fallback={<PageFallback />}>
+            {isApi ? (
+              <ApiLayout>
+                <ApiPage slug={apiSlug} />
+              </ApiLayout>
+            ) : (
+              <DocsLayout hideSidebar={isLanding}>
+                {isLanding ? <LandingPage /> : <DocsPage slug={docsSlug} />}
+              </DocsLayout>
+            )}
+          </Suspense>
+        </SearchProvider>
       </AnalyticsProvider>
     </ThemeProvider>
   );
diff --git a/packages/chronicle/src/themes/paper/Layout.module.css b/packages/chronicle/src/themes/paper/Layout.module.css
index 11348e05..ed59a0ca 100644
--- a/packages/chronicle/src/themes/paper/Layout.module.css
+++ b/packages/chronicle/src/themes/paper/Layout.module.css
@@ -84,7 +84,3 @@
 .contentFull {
   margin-left: 0;
 }
-
-.hiddenTrigger {
-  display: none;
-}
diff --git a/packages/chronicle/src/themes/paper/Layout.tsx b/packages/chronicle/src/themes/paper/Layout.tsx
index 4e58766c..afedffe9 100644
--- a/packages/chronicle/src/themes/paper/Layout.tsx
+++ b/packages/chronicle/src/themes/paper/Layout.tsx
@@ -6,7 +6,6 @@ import { useLocation, useNavigate } from 'react-router';
 import { getLandingEntries } from '@/lib/config';
 import { getActiveContentDir } from '@/lib/navigation';
 import { usePageContext } from '@/lib/page-context';
-import { Search } from '@/components/ui/search';
 import type { ThemeLayoutProps } from '@/types';
 import { ChapterNav } from './ChapterNav';
 import styles from './Layout.module.css';
@@ -83,7 +82,6 @@ function LayoutInner({
           </aside>
         ) : null}
         <div className={cx(styles.content, classNames?.content, { [styles.contentFull]: !showSidebar })}>
-          {config.search?.enabled && <Search classNames={{ trigger: styles.hiddenTrigger }} />}
           {children}
         </div>
       </Flex>