diff --git a/packages/ui/src/lib/actions/shortcut.ts b/packages/ui/src/lib/actions/shortcut.ts index 82764e39..65d6d0f7 100644 --- a/packages/ui/src/lib/actions/shortcut.ts +++ b/packages/ui/src/lib/actions/shortcut.ts @@ -1,4 +1,5 @@ import type { ActionReturn } from 'svelte/action'; +import { on } from 'svelte/events'; export type Shortcut = { key: string; @@ -111,6 +112,9 @@ export const shortcuts = ( options: ShortcutOptions[], ): ActionReturn[]> => { function onKeydown(event: KeyboardEvent) { + if (event.defaultPrevented) { + return; + } const ignoreShortcut = shouldIgnoreEvent(event); for (const { shortcut, onShortcut, ignoreInputFields = true, preventDefault = true } of options) { if (ignoreInputFields && ignoreShortcut) { @@ -127,14 +131,14 @@ export const shortcuts = ( } } - node.addEventListener('keydown', onKeydown); + const off = on(node, 'keydown', onKeydown); return { update(newOptions) { options = newOptions; }, destroy() { - node.removeEventListener('keydown', onKeydown); + off(); }, }; }; diff --git a/packages/ui/src/lib/components/Modal/Modal.svelte b/packages/ui/src/lib/components/Modal/Modal.svelte index 4cda2d50..03da9365 100644 --- a/packages/ui/src/lib/components/Modal/Modal.svelte +++ b/packages/ui/src/lib/components/Modal/Modal.svelte @@ -89,6 +89,11 @@ } }; + const handleEscapeKeydown = (event: KeyboardEvent) => { + event.stopImmediatePropagation(); + onEscapeKeydown?.(event); + }; + onMount(() => { layer = modalState.incrementLayer(); @@ -100,7 +105,7 @@ this.open() }, { shortcut: { key: '/' }, preventDefault: true, onShortcut: () => this.open() }, ]); - document.body.addEventListener('keydown', (event) => this.#handleKeydown(event)); + on(document.body, 'keydown', (event) => this.#handleKeydown(event)); } } @@ -80,6 +82,10 @@ class CommandPaletteManager { } async #handleKeydown(event: KeyboardEvent) { + if (event.defaultPrevented || isModalOpen()) { + return; + } + const actions = await Promise.all(this.#providers.map((provider) => Promise.resolve(provider.onSearch()))); for (const action of actions.flat()) { @@ -101,6 +107,7 @@ class CommandPaletteManager { } action?.onAction(action); + return; } } diff --git a/packages/ui/src/lib/state/modal-state.svelte.ts b/packages/ui/src/lib/state/modal-state.svelte.ts index fa38278e..714ce33b 100644 --- a/packages/ui/src/lib/state/modal-state.svelte.ts +++ b/packages/ui/src/lib/state/modal-state.svelte.ts @@ -19,3 +19,4 @@ class ModalState { } export const modalState = new ModalState(); +export const isModalOpen = () => modalState.layer > 0;