nikon/docsearch
1
0
Fork 0
Code Activity Actions

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

Browse source
This commit is contained in:
François Chalifour 2020-07-07 15:04:57 +02:00
parent 2a00d3f3c0
commit 92e2565d45
2 changed files with 7 additions and 3 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

5
src/DocSearch.tsx
View file

@ -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(

5
src/useDocSearchKeyboardEvents.ts
View file

@ -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();
}