feat(docsearch): support keyboard on focus on default integration

algolia · Jul 7, 2020 · 92e2565 · 92e2565
1 parent 2a00d3f
commit 92e2565
Show file tree

Hide file tree

Showing 2 changed files with 7 additions and 3 deletions.
diff --git a/src/DocSearch.tsx b/src/DocSearch.tsx
@@ -29,6 +29,7 @@ export interface DocSearchProps
 
 export function DocSearch(props: DocSearchProps) {
   const [isOpen, setIsOpen] = React.useState(false);
+  const searchButtonRef = React.useRef<HTMLButtonElement>(null);
 
   const onOpen = React.useCallback(() => {
     setIsOpen(true);
@@ -38,11 +39,11 @@ export function DocSearch(props: DocSearchProps) {
     setIsOpen(false);
   }, [setIsOpen]);
 
-  useDocSearchKeyboardEvents({ isOpen, onOpen, onClose });
+  useDocSearchKeyboardEvents({ isOpen, onOpen, onClose, searchButtonRef });
 
   return (
     <>
-      <DocSearchButton onClick={onOpen} />
+      <DocSearchButton onClick={onOpen} ref={searchButtonRef} />
 
       {isOpen &&
         createPortal(

diff --git a/src/useDocSearchKeyboardEvents.ts b/src/useDocSearchKeyboardEvents.ts
@@ -25,7 +25,10 @@ export function useDocSearchKeyboardEvents({
         }
       }
 
-      if (searchButtonRef.current === document.activeElement) {
+      if (
+        searchButtonRef &&
+        searchButtonRef.current === document.activeElement
+      ) {
         if (/[a-zA-Z0-9]/.test(String.fromCharCode(event.keyCode))) {
           onOpen();
         }