From e976ea0a3a57384ee210fb888ceca5716531411f Mon Sep 17 00:00:00 2001
From: mbecker20 <becker.maxh@gmail.com>
Date: Fri, 17 Mar 2023 20:55:37 +0000
Subject: [PATCH] improve the behavior

---
 frontend/src/components/server/Header.tsx |  2 ++
 frontend/src/components/shared/Input.tsx  | 12 ++++++++----
 2 files changed, 10 insertions(+), 4 deletions(-)

diff --git a/frontend/src/components/server/Header.tsx b/frontend/src/components/server/Header.tsx
index 5d17ce798..e701da871 100644
--- a/frontend/src/components/server/Header.tsx
+++ b/frontend/src/components/server/Header.tsx
@@ -79,6 +79,8 @@ const Header: Component<{}> = (p) => {
                   setEditingName(false);
                   setUpdatingName(false);
                 }}
+                onBlur={() => setEditingName(false)}
+                
               />
             </Show>
           </Show>
diff --git a/frontend/src/components/shared/Input.tsx b/frontend/src/components/shared/Input.tsx
index 24d3ea19d..2ead74621 100644
--- a/frontend/src/components/shared/Input.tsx
+++ b/frontend/src/components/shared/Input.tsx
@@ -5,6 +5,7 @@ const Input: Component<
     onEdit?: (value: string) => void;
     onConfirm?: (value: string) => void;
     onEnter?: (value: string) => void;
+    onEsc?: (value: string) => void;
     disabled?: boolean;
   } & JSX.InputHTMLAttributes<HTMLInputElement> &
     JSX.HTMLAttributes<HTMLDivElement>
@@ -14,14 +15,16 @@ const Input: Component<
       <input
         {...p}
         onInput={(e) => p.onEdit && p.onEdit(e.currentTarget.value)}
-        onBlur={(e) => p.onConfirm && p.onConfirm(e.currentTarget.value)}
+        onBlur={
+          p.onBlur || ((e) => p.onConfirm && p.onConfirm(e.currentTarget.value))
+        }
         onKeyDown={
           p.onKeyDown ||
           ((e) => {
             if (e.key === "Enter") {
-              p.onEnter
-                ? p.onEnter(e.currentTarget.value)
-                : e.currentTarget.blur();
+              p.onEnter && p.onEnter(e.currentTarget.value);
+            } else if (e.key === "Escape") {
+              p.onEsc ? p.onEsc(e.currentTarget.value) : e.currentTarget.blur();
             }
           })
         }
@@ -37,6 +40,7 @@ export const AutofocusInput: Component<
     onEdit?: (value: string) => void;
     onConfirm?: (value: string) => void;
     onEnter?: (value: string) => void;
+    onEsc?: (value: string) => void;
     disabled?: boolean;
   } & JSX.InputHTMLAttributes<HTMLInputElement> &
     JSX.HTMLAttributes<HTMLDivElement>