fix(key): Allow Esc and Any other input event (#173)

* fix(key): Allow Esc and input handler

* chore: set search autoFocus on shortcut component

* fix: allow enter, arrow and disable list if keyboard

web/hooks/use-keyboard-manager.ts

@@ -2,19 +2,31 @@ import { useAtom } from "jotai"
 import { useEffect, useCallback } from "react"
 import { keyboardDisableSourcesAtom } from "@/store/keydown-manager"
 
+const allowedKeys = ["Escape", "ArrowUp", "ArrowDown", "ArrowLeft", "ArrowRight", "Enter"]
+
 export function useKeyboardManager(sourceId: string) {
 	const [disableSources, setDisableSources] = useAtom(keyboardDisableSourcesAtom)
 
 	useEffect(() => {
 		const handleKeyDown = (event: KeyboardEvent) => {
-			if (disableSources.size > 0) {
-				event.preventDefault()
+			if (disableSources.has(sourceId)) {
+				if (allowedKeys.includes(event.key)) {
+					if (event.key === "Escape") {
+						setDisableSources(prev => {
+							const next = new Set(prev)
+							next.delete(sourceId)
+							return next
+						})
+					}
+				} else {
+					event.stopPropagation()
+				}
 			}
 		}
 
-		window.addEventListener("keydown", handleKeyDown)
-		return () => window.removeEventListener("keydown", handleKeyDown)
-	}, [disableSources])
+		window.addEventListener("keydown", handleKeyDown, true)
+		return () => window.removeEventListener("keydown", handleKeyDown, true)
+	}, [disableSources, sourceId, setDisableSources])
 
 	const disableKeydown = useCallback(
 		(disable: boolean) => {
@@ -32,7 +44,7 @@ export function useKeyboardManager(sourceId: string) {
 		[setDisableSources, sourceId]
 	)
 
-	const isKeyboardDisabled = disableSources.size > 0
+	const isKeyboardDisabled = disableSources.has(sourceId)
 
 	return { disableKeydown, isKeyboardDisabled }
 }