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

package.json

@@ -49,7 +49,9 @@
     "@mui/icons-material": "5.11.0",
     "@mui/lab": "5.0.0-alpha.114",
     "@mui/material": "5.11.2",
+    "@use-it/event-listener": "^0.1.7",
     "commonmark": "0.30.0",
+    "keycode": "^2.2.1",
     "svg-pan-zoom": "3.6.1"
   },
   "devDependencies": {

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,7 +3,9 @@ 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 useEventListener from '@use-it/event-listener';
+import keycode from 'keycode';
+import { useEffect, useRef, useState } from 'react';
 
 interface SearchBoxProps {
   placeholder: string;
@@ -15,18 +17,33 @@ 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]);
 
+  useEventListener('keydown', (event: KeyboardEvent) => {
+    if (
+      inputRef.current &&
+      ['/', 's'].includes(keycode(event)) &&
+      document.activeElement?.nodeName.toLowerCase() === 'body' &&
+      document.activeElement !== inputRef.current
+    ) {
+      event.preventDefault();
+      inputRef.current.focus();
+    }
+  });
+
   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={

tests/demo.spec.ts

@@ -148,3 +148,44 @@ test('use search params to pass url', async ({ page }) => {
     'display-schema-from-url.png',
   );
 });
+
+test.describe('search input focus with hotkey', () => {
+  test('pressing / key to focus the search input', async ({ page }) => {
+    const voyagerPage = await gotoVoyagerPage(page);
+
+    await voyagerPage.waitForGraphToBeLoaded();
+    await expect(voyagerPage.page).toHaveScreenshot(
+      'before-search-input-focus.png',
+    );
+
+    await voyagerPage.page.keyboard.press('/');
+    await expect(voyagerPage.page).toHaveScreenshot(
+      'after-search-input-focus.png',
+    );
+
+    await voyagerPage.page.keyboard.press('/');
+    await expect(voyagerPage.page).toHaveScreenshot(
+      'after-search-input-typing-forward-slash.png',
+    );
+  });
+
+  test('should not focus on the search input if any other input is focused', async ({
+    page,
+  }) => {
+    const voyagerPage = await gotoVoyagerPage(page);
+    const { changeSchemaDialog } = voyagerPage;
+    const { sdlTab } = changeSchemaDialog;
+    await voyagerPage.waitForGraphToBeLoaded();
+
+    await changeSchemaDialog.openButton.click();
+    await sdlTab.tab.click();
+    await expect(voyagerPage.page).toHaveScreenshot(
+      'sdl-tab-before-typing-forward-slash.png',
+    );
+
+    await sdlTab.sdlTextArea.fill('/');
+    await expect(voyagerPage.page).toHaveScreenshot(
+      'sdl-tab-after-typing-forward-slash.png',
+    );
+  });
+});