diff --git a/.changeset/calm-buttons-listen.md b/.changeset/calm-buttons-listen.md new file mode 100644 index 00000000..e3d44486 --- /dev/null +++ b/.changeset/calm-buttons-listen.md @@ -0,0 +1,6 @@ +--- +"@docsearch/core": patch +"@docsearch/react": patch +--- + +Prevent the slash search shortcut from intercepting key events on focused buttons. diff --git a/packages/docsearch-core/src/__tests__/DocSearch.test.tsx b/packages/docsearch-core/src/__tests__/DocSearch.test.tsx index 9defab72..191b22b1 100644 --- a/packages/docsearch-core/src/__tests__/DocSearch.test.tsx +++ b/packages/docsearch-core/src/__tests__/DocSearch.test.tsx @@ -138,6 +138,21 @@ describe('@docsearch/core', () => { expect(screen.getByText('State: modal-search')).toBeInTheDocument(); }); + it('does not open search with / from a focused button', () => { + renderWithProvider( + <> + + + + ); + + const button = screen.getByRole('button', { name: 'Action' }); + button.focus(); + fireEvent.keyDown(button, { key: '/', code: 'Slash' }); + + expect(screen.getByText('State: ready')).toBeInTheDocument(); + }); + it('respects keyboard shortcuts', () => { renderWithProvider(, { keyboardShortcuts: { diff --git a/packages/docsearch-core/src/useDocSearchKeyboardEvents.ts b/packages/docsearch-core/src/useDocSearchKeyboardEvents.ts index 5bcd60f7..73ebf98c 100644 --- a/packages/docsearch-core/src/useDocSearchKeyboardEvents.ts +++ b/packages/docsearch-core/src/useDocSearchKeyboardEvents.ts @@ -34,7 +34,8 @@ function isEditingContent(event: KeyboardEvent): boolean { element.isContentEditable || tagName === 'INPUT' || tagName === 'SELECT' || - tagName === 'TEXTAREA' + tagName === 'TEXTAREA' || + tagName === 'BUTTON' ); } diff --git a/packages/docsearch-react/src/__tests__/keyboardShortcuts.test.tsx b/packages/docsearch-react/src/__tests__/keyboardShortcuts.test.tsx index b446a3d7..d3b2f517 100644 --- a/packages/docsearch-react/src/__tests__/keyboardShortcuts.test.tsx +++ b/packages/docsearch-react/src/__tests__/keyboardShortcuts.test.tsx @@ -62,6 +62,18 @@ describe('keyboard shortcuts', () => { expect(document.querySelector('.DocSearch-Modal')).toBeInTheDocument(); }); + + it('does not respond to / from the search button', () => { + render(); + + const button = screen.getByRole('button', { name: /Search/ }); + button.focus(); + fireEvent.keyDown(button, { key: '/', code: 'Slash' }); + + expect( + document.querySelector('.DocSearch-Modal') + ).not.toBeInTheDocument(); + }); }); describe('custom keyboard shortcuts configuration', () => { diff --git a/packages/docsearch-react/src/useDocSearchKeyboardEvents.ts b/packages/docsearch-react/src/useDocSearchKeyboardEvents.ts index 0c052cc4..34cfe557 100644 --- a/packages/docsearch-react/src/useDocSearchKeyboardEvents.ts +++ b/packages/docsearch-react/src/useDocSearchKeyboardEvents.ts @@ -32,7 +32,8 @@ function isEditingContent(event: KeyboardEvent): boolean { element.isContentEditable || tagName === 'INPUT' || tagName === 'SELECT' || - tagName === 'TEXTAREA' + tagName === 'TEXTAREA' || + tagName === 'BUTTON' ); }