feat(docsearch): support typing query when search button is focused (#54

)
francoischalifour · Jul 7, 2020 · dcf2247 · dcf2247
1 parent ce2982d
commit dcf2247
Show file tree

Hide file tree

Showing 3 changed files with 28 additions and 9 deletions.
diff --git a/packages/docsearch-react/src/DocSearchButton.tsx b/packages/docsearch-react/src/DocSearchButton.tsx
@@ -14,12 +14,13 @@ function isAppleDevice() {
   return /(Mac|iPhone|iPod|iPad)/i.test(navigator.platform);
 }
 
-export function DocSearchButton(
-  props: React.DetailedHTMLProps<
+export const DocSearchButton = React.forwardRef<
+  HTMLButtonElement,
+  React.DetailedHTMLProps<
     React.ButtonHTMLAttributes<HTMLButtonElement>,
     HTMLButtonElement
   >
-) {
+>((props, ref) => {
   const [key, setKey] = useState(() =>
     isAppleDevice() ? ACTION_KEY_APPLE : ACTION_KEY_DEFAULT
   );
@@ -31,7 +32,12 @@ export function DocSearchButton(
   }, []);
 
   return (
-    <button type="button" className="DocSearch-SearchButton" {...props}>
+    <button
+      type="button"
+      className="DocSearch-SearchButton"
+      {...props}
+      ref={ref}
+    >
       <SearchIcon />
       <span className="DocSearch-SearchButton-Placeholder">Search</span>
 
@@ -41,4 +47,4 @@ export function DocSearchButton(
       <span className="DocSearch-SearchButton-Key">K</span>
     </button>
   );
-}
+});
diff --git a/packages/docsearch-react/src/useDocSearchKeyboardEvents.ts b/packages/docsearch-react/src/useDocSearchKeyboardEvents.ts
@@ -1,6 +1,11 @@
 import React from 'react';
 
-export function useDocSearchKeyboardEvents({ isOpen, onOpen, onClose }) {
+export function useDocSearchKeyboardEvents({
+  isOpen,
+  onOpen,
+  onClose,
+  searchButtonRef,
+}) {
   React.useEffect(() => {
     function onKeyDown(event: KeyboardEvent) {
       if (
@@ -19,12 +24,18 @@ export function useDocSearchKeyboardEvents({ isOpen, onOpen, onClose }) {
           onOpen();
         }
       }
+
+      if (searchButtonRef.current === document.activeElement) {
+        if (/[a-zA-Z0-9]/.test(String.fromCharCode(event.keyCode))) {
+          onOpen();
+        }
+      }
     }
 
     window.addEventListener('keydown', onKeyDown);
 
     return () => {
       window.removeEventListener('keydown', onKeyDown);
     };
-  }, [isOpen, onOpen, onClose]);
+  }, [isOpen, onOpen, onClose, searchButtonRef]);
 }
diff --git a/packages/website/src/theme/SearchBar/index.js b/packages/website/src/theme/SearchBar/index.js
@@ -1,6 +1,6 @@
 /* eslint-disable import/no-unresolved */
 
-import React, { useState, useCallback } from 'react';
+import React, { useState, useCallback, useRef } from 'react';
 import { createPortal } from 'react-dom';
 import useDocusaurusContext from '@docusaurus/useDocusaurusContext';
 import { useHistory } from '@docusaurus/router';
@@ -40,6 +40,7 @@ function transformItems(items) {
 function DocSearch({ indexName, appId, apiKey, searchParameters }) {
   const history = useHistory();
   const [isOpen, setIsOpen] = useState(false);
+  const searchButtonRef = useRef(null);
 
   const importDocSearchModalIfNeeded = useCallback(() => {
     if (DocSearchModal) {
@@ -64,7 +65,7 @@ function DocSearch({ indexName, appId, apiKey, searchParameters }) {
     setIsOpen(false);
   }, [setIsOpen]);
 
-  useDocSearchKeyboardEvents({ isOpen, onOpen, onClose });
+  useDocSearchKeyboardEvents({ isOpen, onOpen, onClose, searchButtonRef });
 
   return (
     <>
@@ -84,6 +85,7 @@ function DocSearch({ indexName, appId, apiKey, searchParameters }) {
         onFocus={importDocSearchModalIfNeeded}
         onMouseOver={importDocSearchModalIfNeeded}
         onClick={onOpen}
+        ref={searchButtonRef}
       />
 
       {isOpen &&