conditionally add event listeners in search

Author: chargome

src/components/search/index.tsx

@@ -15,7 +15,7 @@ import {usePathname, useRouter} from 'next/navigation';
 import algoliaInsights from 'search-insights';
 
 import {useOnClickOutside} from 'sentry-docs/clientUtils';
-import {useKeyboardNavigate} from 'sentry-docs/hooks/useKeyboardNavigate';
+import {useListKeyboardNavigate} from 'sentry-docs/hooks/useListKeyboardNavigate';
 import {isDeveloperDocs} from 'sentry-docs/isDeveloperDocs';
 
 import styles from './search.module.scss';
@@ -181,9 +181,10 @@ export function Search({path, autoFocus, searchPlatforms = [], showChatBot}: Pro
     []
   );
 
-  const {focused} = useKeyboardNavigate({
+  const {focused} = useListKeyboardNavigate({
     list: flatHits,
     onSelect: hit => router.push(relativizeUrl(hit.url)),
+    disableEventListeners: !inputFocus,
   });
 
   const trackSearchResultClick = useCallback((hit: Hit, position: number): void => {

src/hooks/useKeyboardNavigate.tsx renamed to src/hooks/useListKeyboardNavigate.tsx

@@ -1,10 +1,15 @@
 import {useCallback, useEffect, useMemo, useState} from 'react';
 
 type Props<T> = {
+  /**
+   * Whether to disable the keyboard event listeners conditionally
+   */
+  disableEventListeners: boolean;
   /**
    * The list of values to navigate through
    */
   list: T[];
+
   /**
    * Callback triggered when the item is selected
    */
@@ -14,7 +19,7 @@ type Props<T> = {
 /**
  * Navigate a list of items using the up/down arrow and ^j/^k keys
  */
-function useKeyboardNavigate<T>({list, onSelect}: Props<T>) {
+function useListKeyboardNavigate<T>({list, onSelect, disableEventListeners}: Props<T>) {
   const [focused, setFocus] = useState<T | null>(null);
 
   const setFocusIndex = useCallback(
@@ -85,11 +90,15 @@ function useKeyboardNavigate<T>({list, onSelect}: Props<T>) {
   );
 
   useEffect(() => {
-    document.addEventListener('keydown', handleNavigate);
-    return () => document.removeEventListener('keydown', handleNavigate);
-  }, [handleNavigate]);
+    if (!disableEventListeners) {
+      document.addEventListener('keydown', handleNavigate);
+      return () => document.removeEventListener('keydown', handleNavigate);
+    }
+
+    return undefined;
+  }, [disableEventListeners, handleNavigate]);
 
   return {focused, setFocus};
 }
 
-export {useKeyboardNavigate};
+export {useListKeyboardNavigate};