Add keyboard shortcut ("/" key) to focus search input

src/components/doc-explorer/DocExplorer.tsx

@@ -135,7 +135,7 @@ export default class DocExplorer extends Component<
       <div className="type-doc" key={navStack.length}>
         {renderNavigation(previousNav, currentNav)}
         <SearchBox
-          placeholder={`Search ${name}...`}
+          placeholder={`Search ${name}... [ / ]`}
           value={currentNav.searchValue}
           onSearch={this.handleSearch}
         />

src/components/utils/SearchBox.tsx

@@ -3,30 +3,39 @@ import Box from '@mui/material/Box';
 import IconButton from '@mui/material/IconButton';
 import Input from '@mui/material/Input';
 import InputAdornment from '@mui/material/InputAdornment';
-import { useEffect, useState } from 'react';
+import { useEffect, useRef, useState } from 'react';
+
+import { useFocusInputWithHotkey } from '../../utils/useFocusInputWithHotkey';
 
 interface SearchBoxProps {
   placeholder: string;
   value: string | null;
   onSearch: (value: string) => void;
 }
 
+const SEARCH_FOCUS_KEY = '/';
+
 export default function SearchBox(props: SearchBoxProps) {
   const [value, setValue] = useState(props.value ?? '');
   const { placeholder, onSearch } = props;
 
+  const inputRef = useRef<HTMLInputElement>();
+
   useEffect(() => {
     const timeout = setTimeout(() => onSearch(value), 200);
     return () => clearTimeout(timeout);
   }, [onSearch, value]);
 
+  useFocusInputWithHotkey(inputRef.current, SEARCH_FOCUS_KEY);
+
   return (
     <Box paddingLeft={2} paddingRight={2}>
       <Input
         fullWidth
         placeholder={placeholder}
         value={value}
         onChange={(event) => setValue(event.target.value)}
+        inputRef={inputRef}
         type="text"
         className="search-box"
         endAdornment={

src/utils/useFocusInputWithHotkey.ts

@@ -0,0 +1,37 @@
+import { useCallback } from 'react';
+
+import { useOnKeydown } from './useOnKeydown';
+
+export function useFocusInputWithHotkey(
+  target: HTMLInputElement | undefined,
+  key: string,
+) {
+  const keydownHandler = useCallback(
+    (keyboardEvent: KeyboardEvent) => {
+      if (target && !isActiveElementTypable()) {
+        target.focus();
+        keyboardEvent.preventDefault();
+      }
+    },
+    [target],
+  );
+
+  useOnKeydown(key, keydownHandler);
+}
+
+function isActiveElementTypable() {
+  const activeElement = document.activeElement;
+
+  const typableElements = [
+    HTMLInputElement,
+    HTMLTextAreaElement,
+    HTMLSelectElement,
+    HTMLDataListElement,
+    HTMLFieldSetElement,
+  ];
+
+  return (
+    typableElements.some((type) => activeElement instanceof type) ||
+    activeElement?.hasAttribute('contentEditable')
+  );
+}

src/utils/useOnKeydown.ts

@@ -0,0 +1,23 @@
+import { useCallback, useEffect } from 'react';
+
+export function useOnKeydown(
+  key: string,
+  callback: (keyboardEvent: KeyboardEvent) => void,
+) {
+  const keydownHandler = useCallback(
+    (keyboardEvent: KeyboardEvent) => {
+      if (keyboardEvent.key === key) {
+        callback(keyboardEvent);
+      }
+    },
+    [key, callback],
+  );
+
+  useEffect(() => {
+    window.addEventListener('keydown', keydownHandler);
+
+    return () => {
+      window.removeEventListener('keydown', keydownHandler);
+    };
+  }, [keydownHandler]);
+}