fix(v5): ignore slash shortcut on focused buttons (#2955)

Backport of #2871.\n\nOriginal commit: 0e41a78c44

Co-authored-by: Sigmabro <122412346+Sigmabrogz@users.noreply.github.com>

.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.

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(
+        <>
+          <StateRender />
+          <button type="button">Action</button>
+        </>
+      );
+
+      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(<StateRender />, {
         keyboardShortcuts: {

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

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(<DocSearch />);
+
+      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', () => {

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