diff --git a/src/lib/commandCenter/commandCenter.svelte b/src/lib/commandCenter/commandCenter.svelte index c82a5c0359..91bf5dfe91 100644 --- a/src/lib/commandCenter/commandCenter.svelte +++ b/src/lib/commandCenter/commandCenter.svelte @@ -30,7 +30,12 @@ import { getContext, setContext } from 'svelte'; import { get, writable, type Readable } from 'svelte/store'; import { fade } from 'svelte/transition'; - import { commandCenterKeyDownHandler, disableCommands, registerCommands } from './commands'; + import { + commandCenterKeyDownHandler, + disableCommands, + isTargetInputLike, + registerCommands + } from './commands'; import { RootPanel } from './panels'; import { addSubPanel, clearSubPanels, subPanels } from './subPanels'; import { addNotification } from '$lib/stores/notifications'; @@ -95,13 +100,9 @@ keys = []; }, 1000); - function isInputEvent(event: KeyboardEvent) { - return ['INPUT', 'TEXTAREA', 'SELECT'].includes((event.target as HTMLElement).tagName); - } - const handleKeydown = (e: KeyboardEvent) => { if (!$subPanels.length) { - if (isInputEvent(e)) return; + if (isTargetInputLike(e.target)) return; keys = [...keys, e.key].slice(-10); resetKeys(); } diff --git a/src/lib/commandCenter/commands.ts b/src/lib/commandCenter/commands.ts index fa8427d30b..e4f3837184 100644 --- a/src/lib/commandCenter/commands.ts +++ b/src/lib/commandCenter/commands.ts @@ -100,8 +100,11 @@ const commandsEnabled = derived(disabledMap, ($disabledMap) => { return Array.from($disabledMap.values()).every((disabled) => !disabled); }); -function isInputEvent(event: KeyboardEvent) { - return ['INPUT', 'TEXTAREA', 'SELECT'].includes((event.target as HTMLElement).tagName); +export function isTargetInputLike(element: EventTarget | null) { + if (!(element instanceof HTMLElement)) return false; + return !!element.closest( + 'input,textarea,select,[contenteditable],[role="combobox"],[role="textbox"],[role="searchbox"],[data-command-center-ignore]' + ); } function getCommandRank(command: KeyedCommand) { @@ -204,7 +207,12 @@ export const commandCenterKeyDownHandler = derived( for (const command of commandsArr) { if (!isKeyedCommand(command)) continue; if (!command.forceEnable) { - if (command.disabled || !enabled || isInputEvent(event) || $wizard.show) { + if ( + command.disabled || + !enabled || + isTargetInputLike(event.target) || + $wizard.show + ) { continue; } } diff --git a/src/lib/elements/forms/inputSelect.svelte b/src/lib/elements/forms/inputSelect.svelte index 57791bdd74..de977bfc14 100644 --- a/src/lib/elements/forms/inputSelect.svelte +++ b/src/lib/elements/forms/inputSelect.svelte @@ -56,6 +56,7 @@ helper={error ?? helper} {required} state={error ? 'error' : 'default'} + data-command-center-ignore on:invalid={handleInvalid} on:input on:change