fix: input onblur focus resolves #3 (#86)

src/renderer/src/runner/runner.tsx

@@ -1,12 +1,12 @@
-/* eslint-disable prettier/prettier */
-import { ChangeEvent, ReactElement, useEffect, useState } from 'react'
+import { ChangeEvent, ReactElement, useEffect, useState, useRef } from 'react'
 import { Command, ResultStreamEvent, Runtime } from './runtime'
 
 export default function Runner(): ReactElement {
   const [runtimeList, setRuntimes] = useState<Runtime[]>([])
   const [historyIndex, setHistoryIndex] = useState<number>(-1)
   const [commanderMode, setCommanderMode] = useState<boolean>(false)
   const [rawMode, setRawMode] = useState<boolean>(false)
+  const inputRef = useRef<HTMLInputElement>(null)
   const reloadRuntimesFromBackend = async (): Promise<void> => {
     const isCommanderMode = await window.electron.ipcRenderer.invoke('runner.isCommanderMode')
     const runtimesFetch: Runtime[] = await window.electron.ipcRenderer.invoke('runtimes')
@@ -125,6 +125,31 @@ export default function Runner(): ReactElement {
     }
   }
 
+  useEffect(() => {
+    inputRef.current?.focus()
+
+    // Conditionally handle keydown of letter or arrow to refocus input
+    const handleGlobalKeyDown = (event): void => {
+      if (
+        /^[a-zA-Z]$/.test(event.key) ||
+        event.key === 'ArrowUp' ||
+        event.key === 'ArrowDown' ||
+        (!event.shiftKey && !event.ctrlKey && !event.altKey)
+      ) {
+        if (document.activeElement !== inputRef.current) {
+          inputRef.current?.focus()
+        }
+        handleKeyDown(event)
+      }
+    }
+
+    document.addEventListener('keydown', handleGlobalKeyDown)
+
+    return () => {
+      document.removeEventListener('keydown', handleGlobalKeyDown)
+    }
+  }, [])
+
   useEffect(() => {
     reloadRuntimesFromBackend().catch((error) => console.error(error))
   }, [])
@@ -173,6 +198,7 @@ export default function Runner(): ReactElement {
           <div className="runner-input-container">
             <div className="runner-input">
               <input
+                ref={inputRef}
                 autoFocus
                 className="runner-input-field"
                 placeholder=">"