From a030a29948e634b5ffc96a3ba9d836c61a6a941b Mon Sep 17 00:00:00 2001 From: Harsh Mahajan Date: Tue, 11 Nov 2025 07:21:41 +0000 Subject: [PATCH 1/5] fix: Prevent command center shortcuts while typing in selects --- src/lib/commandCenter/commandCenter.svelte | 13 ++++---- src/lib/commandCenter/commands.ts | 35 ++++++++++++++++++++-- src/lib/elements/forms/inputSelect.svelte | 1 + 3 files changed, 40 insertions(+), 9 deletions(-) diff --git a/src/lib/commandCenter/commandCenter.svelte b/src/lib/commandCenter/commandCenter.svelte index c82a5c0359..6611d3c911 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, + isKeyboardEventFromInput, + 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 (isKeyboardEventFromInput(e)) return; keys = [...keys, e.key].slice(-10); resetKeys(); } diff --git a/src/lib/commandCenter/commands.ts b/src/lib/commandCenter/commands.ts index fa8427d30b..93f2010aad 100644 --- a/src/lib/commandCenter/commands.ts +++ b/src/lib/commandCenter/commands.ts @@ -100,8 +100,32 @@ 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); +const INPUT_TAGS = ['INPUT', 'TEXTAREA', 'SELECT']; +const INPUT_ROLES = ['combobox', 'textbox', 'searchbox']; + +function isTargetInputLike(element: EventTarget | null) { + const el = (element as Element) ?? null; + if (!(el instanceof HTMLElement)) return false; + + if (INPUT_TAGS.includes(el.tagName)) return true; + if (el.isContentEditable) return true; + + const role = el.getAttribute('role'); + if (role && INPUT_ROLES.includes(role.toLowerCase())) return true; + + if ( + el.closest( + 'input,textarea,select,[contenteditable],[role="combobox"],[role="textbox"],[role="searchbox"],[data-command-center-ignore]' + ) + ) { + return true; + } + + return false; +} + +export function isKeyboardEventFromInput(event: KeyboardEvent) { + return isTargetInputLike(event.target); } function getCommandRank(command: KeyedCommand) { @@ -204,7 +228,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 || + isKeyboardEventFromInput(event) || + $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 From dc69034cd813543c47d94ff27e7a1395d1800a69 Mon Sep 17 00:00:00 2001 From: Harsh Mahajan Date: Tue, 11 Nov 2025 07:28:44 +0000 Subject: [PATCH 2/5] simplified logic --- src/lib/commandCenter/commands.ts | 25 ++++--------------------- 1 file changed, 4 insertions(+), 21 deletions(-) diff --git a/src/lib/commandCenter/commands.ts b/src/lib/commandCenter/commands.ts index 93f2010aad..6ebe35c10e 100644 --- a/src/lib/commandCenter/commands.ts +++ b/src/lib/commandCenter/commands.ts @@ -100,28 +100,11 @@ const commandsEnabled = derived(disabledMap, ($disabledMap) => { return Array.from($disabledMap.values()).every((disabled) => !disabled); }); -const INPUT_TAGS = ['INPUT', 'TEXTAREA', 'SELECT']; -const INPUT_ROLES = ['combobox', 'textbox', 'searchbox']; - function isTargetInputLike(element: EventTarget | null) { - const el = (element as Element) ?? null; - if (!(el instanceof HTMLElement)) return false; - - if (INPUT_TAGS.includes(el.tagName)) return true; - if (el.isContentEditable) return true; - - const role = el.getAttribute('role'); - if (role && INPUT_ROLES.includes(role.toLowerCase())) return true; - - if ( - el.closest( - 'input,textarea,select,[contenteditable],[role="combobox"],[role="textbox"],[role="searchbox"],[data-command-center-ignore]' - ) - ) { - return true; - } - - return false; + if (!(element instanceof HTMLElement)) return false; + return !!element.closest( + 'input,textarea,select,[contenteditable],[role="combobox"],[role="textbox"],[role="searchbox"],[data-command-center-ignore]' + ); } export function isKeyboardEventFromInput(event: KeyboardEvent) { From ac02658df83e4dab8a819571a35bcd31105da258 Mon Sep 17 00:00:00 2001 From: Harsh Mahajan Date: Wed, 12 Nov 2025 07:40:41 +0000 Subject: [PATCH 3/5] addressed comment --- src/lib/commandCenter/commandCenter.svelte | 4 ++-- src/lib/commandCenter/commands.ts | 8 ++------ 2 files changed, 4 insertions(+), 8 deletions(-) diff --git a/src/lib/commandCenter/commandCenter.svelte b/src/lib/commandCenter/commandCenter.svelte index 6611d3c911..91bf5dfe91 100644 --- a/src/lib/commandCenter/commandCenter.svelte +++ b/src/lib/commandCenter/commandCenter.svelte @@ -33,7 +33,7 @@ import { commandCenterKeyDownHandler, disableCommands, - isKeyboardEventFromInput, + isTargetInputLike, registerCommands } from './commands'; import { RootPanel } from './panels'; @@ -102,7 +102,7 @@ const handleKeydown = (e: KeyboardEvent) => { if (!$subPanels.length) { - if (isKeyboardEventFromInput(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 6ebe35c10e..e4f3837184 100644 --- a/src/lib/commandCenter/commands.ts +++ b/src/lib/commandCenter/commands.ts @@ -100,17 +100,13 @@ const commandsEnabled = derived(disabledMap, ($disabledMap) => { return Array.from($disabledMap.values()).every((disabled) => !disabled); }); -function isTargetInputLike(element: EventTarget | null) { +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]' ); } -export function isKeyboardEventFromInput(event: KeyboardEvent) { - return isTargetInputLike(event.target); -} - function getCommandRank(command: KeyedCommand) { const { keys, ctrl: meta, shift, alt } = command; const modifiers = [meta, shift, alt].filter(Boolean).length; @@ -214,7 +210,7 @@ export const commandCenterKeyDownHandler = derived( if ( command.disabled || !enabled || - isKeyboardEventFromInput(event) || + isTargetInputLike(event.target) || $wizard.show ) { continue; From bab1c5a517a8ca3d15c2a6f486e68ed4c4feb2df Mon Sep 17 00:00:00 2001 From: Harsh Mahajan <127186841+HarshMN2345@users.noreply.github.com> Date: Sat, 22 Nov 2025 17:44:21 +0530 Subject: [PATCH 4/5] Update commandCenter.svelte --- src/lib/commandCenter/commandCenter.svelte | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/src/lib/commandCenter/commandCenter.svelte b/src/lib/commandCenter/commandCenter.svelte index 91bf5dfe91..2766e7a6ff 100644 --- a/src/lib/commandCenter/commandCenter.svelte +++ b/src/lib/commandCenter/commandCenter.svelte @@ -1,7 +1,7 @@