Merge pull request #2583 from appwrite/fix-SER-493-prevent-global-shortcuts-when-typing-in-select

Author: ItzNotABug

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();
         }

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;
                     }
                 }

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