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'
);
}