Skip to content

Commit

Permalink
fix(docsearch): allow a single instance to open
Browse files Browse the repository at this point in the history
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.
  • Loading branch information
francoischalifour committed Aug 21, 2020
1 parent 9c1b040 commit 928b9ca
Showing 1 changed file with 9 additions and 2 deletions.
11 changes: 9 additions & 2 deletions src/useDocSearchKeyboardEvents.ts
Expand Up @@ -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.
Expand All @@ -41,8 +48,8 @@ export function useDocSearchKeyboardEvents({

if (isOpen) {
onClose();
} else {
onOpen();
} else if (!document.body.classList.contains('DocSearch--active')) {
open();
}
}

Expand Down

0 comments on commit 928b9ca

Please sign in to comment.