fix(modal): Fixes modal opening on every key press (#2837)

package.json

@@ -86,8 +86,5 @@
     "vitest": "3.0.2",
     "watch": "1.0.2"
   },
-  "resolutions": {
-    "@docsearch/react": "^4.1.0"
-  },
   "packageManager": "yarn@4.6.0"
 }

packages/docsearch-core/src/DocSearch.tsx

@@ -145,6 +145,8 @@ function DocSearchInner(
 
   const closeModal = React.useCallback((): void => {
     setDocsearchState('ready');
+    // Refocus the Modal trigger on close
+    searchButtonRef.current?.focus();
     setInitialQuery(props.initialQuery ?? '');
   }, [setDocsearchState, props.initialQuery]);
 

packages/docsearch-core/src/useDocSearchKeyboardEvents.ts

@@ -6,8 +6,18 @@ export interface UseDocSearchKeyboardEventsProps {
   isOpen: boolean;
   onOpen: () => void;
   onClose: () => void;
+  /**
+   * Deprecated: Still here for backwards compat.
+   *
+   * @deprecated
+   */
   onInput?: (event: KeyboardEvent) => void;
-  searchButtonRef: React.RefObject<HTMLButtonElement | null>;
+  /**
+   * Deprecated: Still here for backwards compat.
+   *
+   * @deprecated
+   */
+  searchButtonRef?: React.RefObject<HTMLButtonElement | null>;
   isAskAiActive: boolean;
   onAskAiToggle: (toggle: boolean) => void;
   keyboardShortcuts?: KeyboardShortcuts;
@@ -26,8 +36,6 @@ export function useDocSearchKeyboardEvents({
   onAskAiToggle,
   onClose,
   onOpen,
-  onInput,
-  searchButtonRef,
   keyboardShortcuts = DEFAULT_KEYBOARD_SHORTCUTS,
 }: UseDocSearchKeyboardEventsProps): void {
   React.useEffect(() => {
@@ -49,14 +57,6 @@ export function useDocSearchKeyboardEvents({
         } else if (!document.body.classList.contains('DocSearch--active')) {
           onOpen();
         }
-
-        return;
-      }
-
-      if (searchButtonRef && searchButtonRef.current === document.activeElement && onInput) {
-        if (/[a-zA-Z0-9]/.test(String.fromCharCode(event.keyCode))) {
-          onInput(event);
-        }
       }
     }
 
@@ -65,5 +65,5 @@ export function useDocSearchKeyboardEvents({
     return (): void => {
       window.removeEventListener('keydown', onKeyDown);
     };
-  }, [isOpen, isAskAiActive, searchButtonRef, keyboardShortcuts, onOpen, onClose, onInput, onAskAiToggle]);
+  }, [isOpen, isAskAiActive, keyboardShortcuts, onOpen, onClose, onAskAiToggle]);
 }

packages/docsearch-js/package.json

@@ -43,6 +43,8 @@
     "rollup-plugin-dts": "^6.2.1"
   },
   "nx": {
-    "implicitDependencies": ["@docsearch/react"]
+    "implicitDependencies": [
+      "@docsearch/react"
+    ]
   }
 }

packages/docsearch-react/src/useDocSearchKeyboardEvents.ts

@@ -7,8 +7,18 @@ export interface UseDocSearchKeyboardEventsProps {
   isOpen: boolean;
   onOpen: () => void;
   onClose: () => void;
+  /**
+   * Deprecated: Still here for backwards compat.
+   *
+   * @deprecated
+   */
   onInput?: (event: KeyboardEvent) => void;
-  searchButtonRef: React.RefObject<HTMLButtonElement | null>;
+  /**
+   * Deprecated: Still here for backwards compat.
+   *
+   * @deprecated
+   */
+  searchButtonRef?: React.RefObject<HTMLButtonElement | null>;
   isAskAiActive: boolean;
   onAskAiToggle: (toggle: boolean) => void;
   keyboardShortcuts?: KeyboardShortcuts;
@@ -25,10 +35,8 @@ export function useDocSearchKeyboardEvents({
   isOpen,
   onOpen,
   onClose,
-  onInput,
   isAskAiActive,
   onAskAiToggle,
-  searchButtonRef,
   keyboardShortcuts,
 }: UseDocSearchKeyboardEventsProps): void {
   const resolvedShortcuts = getKeyboardShortcuts(keyboardShortcuts);
@@ -64,14 +72,6 @@ export function useDocSearchKeyboardEvents({
           // another one.
           onOpen();
         }
-
-        return;
-      }
-
-      if (searchButtonRef && searchButtonRef.current === document.activeElement && onInput) {
-        if (/[a-zA-Z0-9]/.test(String.fromCharCode(event.keyCode))) {
-          onInput(event);
-        }
       }
     }
 
@@ -80,5 +80,5 @@ export function useDocSearchKeyboardEvents({
     return (): void => {
       window.removeEventListener('keydown', onKeyDown);
     };
-  }, [isOpen, onOpen, onClose, onInput, searchButtonRef, isAskAiActive, onAskAiToggle, resolvedShortcuts]);
+  }, [isOpen, onOpen, onClose, isAskAiActive, onAskAiToggle, resolvedShortcuts]);
 }

packages/docsearch-sidepanel-js/package.json

@@ -45,6 +45,8 @@
     "rollup-plugin-dts": "^6.2.1"
   },
   "nx": {
-    "implicitDependencies": ["@docsearch/react"]
+    "implicitDependencies": [
+      "@docsearch/react"
+    ]
   }
 }

yarn.lock

@@ -2508,37 +2508,7 @@ __metadata:
   languageName: unknown
   linkType: soft
 
-"@docsearch/react@npm:^4.1.0":
-  version: 4.4.0
-  resolution: "@docsearch/react@npm:4.4.0"
-  dependencies:
-    "@ai-sdk/react": "npm:^2.0.30"
-    "@algolia/autocomplete-core": "npm:1.19.2"
-    "@docsearch/core": "npm:4.4.0"
-    "@docsearch/css": "npm:4.4.0"
-    ai: "npm:^5.0.30"
-    algoliasearch: "npm:^5.28.0"
-    marked: "npm:^16.3.0"
-    zod: "npm:^4.1.8"
-  peerDependencies:
-    "@types/react": ">= 16.8.0 < 20.0.0"
-    react: ">= 16.8.0 < 20.0.0"
-    react-dom: ">= 16.8.0 < 20.0.0"
-    search-insights: ">= 1 < 3"
-  peerDependenciesMeta:
-    "@types/react":
-      optional: true
-    react:
-      optional: true
-    react-dom:
-      optional: true
-    search-insights:
-      optional: true
-  checksum: 10c0/7c0f289767b1cdd89fe05c899cd2574c7d273ce459cf7fb122ad4f427a406a5cc9f4f39ca6188b7f9f927d7f471f7af2a6ab5e0cb7d285494d0c9458876eac03
-  languageName: node
-  linkType: hard
-
-"@docsearch/react@workspace:packages/docsearch-react":
+"@docsearch/react@npm:4.5.0-beta.0, @docsearch/react@workspace:*, @docsearch/react@workspace:packages/docsearch-react":
   version: 0.0.0-use.local
   resolution: "@docsearch/react@workspace:packages/docsearch-react"
   dependencies:
@@ -2573,6 +2543,36 @@ __metadata:
   languageName: unknown
   linkType: soft
 
+"@docsearch/react@npm:^3.9.0 || ^4.1.0":
+  version: 4.4.0
+  resolution: "@docsearch/react@npm:4.4.0"
+  dependencies:
+    "@ai-sdk/react": "npm:^2.0.30"
+    "@algolia/autocomplete-core": "npm:1.19.2"
+    "@docsearch/core": "npm:4.4.0"
+    "@docsearch/css": "npm:4.4.0"
+    ai: "npm:^5.0.30"
+    algoliasearch: "npm:^5.28.0"
+    marked: "npm:^16.3.0"
+    zod: "npm:^4.1.8"
+  peerDependencies:
+    "@types/react": ">= 16.8.0 < 20.0.0"
+    react: ">= 16.8.0 < 20.0.0"
+    react-dom: ">= 16.8.0 < 20.0.0"
+    search-insights: ">= 1 < 3"
+  peerDependenciesMeta:
+    "@types/react":
+      optional: true
+    react:
+      optional: true
+    react-dom:
+      optional: true
+    search-insights:
+      optional: true
+  checksum: 10c0/7c0f289767b1cdd89fe05c899cd2574c7d273ce459cf7fb122ad4f427a406a5cc9f4f39ca6188b7f9f927d7f471f7af2a6ab5e0cb7d285494d0c9458876eac03
+  languageName: node
+  linkType: hard
+
 "@docsearch/sidepanel-js@npm:4.5.0-beta.0, @docsearch/sidepanel-js@workspace:packages/docsearch-sidepanel-js":
   version: 0.0.0-use.local
   resolution: "@docsearch/sidepanel-js@workspace:packages/docsearch-sidepanel-js"