From 9943cd463c89f811290156f20dc464d4b3757635 Mon Sep 17 00:00:00 2001 From: Paul Jankowski <8BitTitan@gmail.com> Date: Mon, 12 Jan 2026 12:01:35 -0500 Subject: [PATCH] fix(modal): Fixes modal opening on every key press --- package.json | 3 -- packages/docsearch-core/src/DocSearch.tsx | 2 + .../src/useDocSearchKeyboardEvents.ts | 24 +++++------ packages/docsearch-js/package.json | 4 +- .../src/useDocSearchKeyboardEvents.ts | 24 +++++------ packages/docsearch-sidepanel-js/package.json | 4 +- yarn.lock | 42 +++++++++---------- 7 files changed, 53 insertions(+), 50 deletions(-) diff --git a/package.json b/package.json index 546b57ca08..db28c21da0 100644 --- a/package.json +++ b/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" } diff --git a/packages/docsearch-core/src/DocSearch.tsx b/packages/docsearch-core/src/DocSearch.tsx index fd2874d8ac..d92949cf0c 100644 --- a/packages/docsearch-core/src/DocSearch.tsx +++ b/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]); diff --git a/packages/docsearch-core/src/useDocSearchKeyboardEvents.ts b/packages/docsearch-core/src/useDocSearchKeyboardEvents.ts index 556ebcddef..2815b67dbf 100644 --- a/packages/docsearch-core/src/useDocSearchKeyboardEvents.ts +++ b/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; + /** + * Deprecated: Still here for backwards compat. + * + * @deprecated + */ + searchButtonRef?: React.RefObject; 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]); } diff --git a/packages/docsearch-js/package.json b/packages/docsearch-js/package.json index acadd57b0e..9d4709f9dc 100644 --- a/packages/docsearch-js/package.json +++ b/packages/docsearch-js/package.json @@ -43,6 +43,8 @@ "rollup-plugin-dts": "^6.2.1" }, "nx": { - "implicitDependencies": ["@docsearch/react"] + "implicitDependencies": [ + "@docsearch/react" + ] } } diff --git a/packages/docsearch-react/src/useDocSearchKeyboardEvents.ts b/packages/docsearch-react/src/useDocSearchKeyboardEvents.ts index cb53b58d6a..6e4b480d59 100644 --- a/packages/docsearch-react/src/useDocSearchKeyboardEvents.ts +++ b/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; + /** + * Deprecated: Still here for backwards compat. + * + * @deprecated + */ + searchButtonRef?: React.RefObject; 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]); } diff --git a/packages/docsearch-sidepanel-js/package.json b/packages/docsearch-sidepanel-js/package.json index 0d05a5cf1d..063862d745 100644 --- a/packages/docsearch-sidepanel-js/package.json +++ b/packages/docsearch-sidepanel-js/package.json @@ -45,6 +45,8 @@ "rollup-plugin-dts": "^6.2.1" }, "nx": { - "implicitDependencies": ["@docsearch/react"] + "implicitDependencies": [ + "@docsearch/react" + ] } } diff --git a/yarn.lock b/yarn.lock index 1ad3800196..a915a4fd7b 100644 --- a/yarn.lock +++ b/yarn.lock @@ -2508,17 +2508,23 @@ __metadata: languageName: unknown linkType: soft -"@docsearch/react@npm:^4.1.0": - version: 4.4.0 - resolution: "@docsearch/react@npm:4.4.0" +"@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: "@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" + "@docsearch/core": "npm:4.5.0-beta.0" + "@docsearch/css": "npm:4.5.0-beta.0" + "@rollup/plugin-replace": "npm:6.0.2" + "@testing-library/jest-dom": "npm:6.6.3" + "@testing-library/react": "npm:16.2.0" ai: "npm:^5.0.30" algoliasearch: "npm:^5.28.0" marked: "npm:^16.3.0" + nodemon: "npm:^3.1.0" + rollup-plugin-dts: "npm:^6.2.1" + vitest: "npm:3.0.2" zod: "npm:^4.1.8" peerDependencies: "@types/react": ">= 16.8.0 < 20.0.0" @@ -2534,27 +2540,20 @@ __metadata: optional: true search-insights: optional: true - checksum: 10c0/7c0f289767b1cdd89fe05c899cd2574c7d273ce459cf7fb122ad4f427a406a5cc9f4f39ca6188b7f9f927d7f471f7af2a6ab5e0cb7d285494d0c9458876eac03 - languageName: node - linkType: hard + languageName: unknown + linkType: soft -"@docsearch/react@workspace:packages/docsearch-react": - version: 0.0.0-use.local - resolution: "@docsearch/react@workspace:packages/docsearch-react" +"@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.5.0-beta.0" - "@docsearch/css": "npm:4.5.0-beta.0" - "@rollup/plugin-replace": "npm:6.0.2" - "@testing-library/jest-dom": "npm:6.6.3" - "@testing-library/react": "npm:16.2.0" + "@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" - nodemon: "npm:^3.1.0" - rollup-plugin-dts: "npm:^6.2.1" - vitest: "npm:3.0.2" zod: "npm:^4.1.8" peerDependencies: "@types/react": ">= 16.8.0 < 20.0.0" @@ -2570,8 +2569,9 @@ __metadata: optional: true search-insights: optional: true - languageName: unknown - linkType: soft + 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