nikon/docsearch
1
0
Fork 0
Code Activity Actions

fix(docsearch): allow a single instance to open

Browse source 
If a website uses two DocSearch instances (e.g., one for mobile and one for desktop), it resulted in a double modal being show when hitting `Ctrl + K`.

This is fixed by checking that the active DocSearch CSS class is not applied on `body` before opening the modal.
This commit is contained in:
François Chalifour 2020-08-21 14:30:57 +02:00
parent 9c1b04003a
commit 928b9ca7b8
1 changed files with 9 additions and 2 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

11
src/useDocSearchKeyboardEvents.ts
View file

@ -29,6 +29,13 @@ export function useDocSearchKeyboardEvents({
}: UseDocSearchKeyboardEventsProps) {
React.useEffect(() => {
function onKeyDown(event: KeyboardEvent) {
function open() {
// We check that no other DocSearch modal is showing before opening
// another one.
if (!document.body.classList.contains('DocSearch--active')) {
onOpen();
}
}
if (
(event.keyCode === 27 && isOpen) ||
// The `Cmd+K` shortcut both opens and closes the modal.
@ -41,8 +48,8 @@ export function useDocSearchKeyboardEvents({
if (isOpen) {
onClose();
} else {
onOpen();
} else if (!document.body.classList.contains('DocSearch--active')) {
open();
}
}