Save name fields on unfocus (#2327)

packages/desktop-client/src/components/accounts/Header.jsx

@@ -126,7 +126,8 @@ export function AccountHeader({
                 <Input
                   defaultValue={accountName}
                   onEnter={e => onSaveName(e.target.value)}
-                  onBlur={() => onExposeName(false)}
+                  onBlur={e => onSaveName(e.target.value)}
+                  onEscape={() => onExposeName(false)}
                   style={{
                     fontSize: 25,
                     fontWeight: 500,

packages/desktop-client/src/components/common/Input.tsx

@@ -26,6 +26,7 @@ export type InputProps = InputHTMLAttributes<HTMLInputElement> & {
   style?: CSSProperties;
   inputRef?: Ref<HTMLInputElement>;
   onEnter?: (event: KeyboardEvent<HTMLInputElement>) => void;
+  onEscape?: (event: KeyboardEvent<HTMLInputElement>) => void;
   onUpdate?: (newValue: string) => void;
   focused?: boolean;
 };
@@ -34,6 +35,7 @@ export function Input({
   style,
   inputRef,
   onEnter,
+  onEscape,
   onUpdate,
   focused,
   ...nativeProps
@@ -65,6 +67,10 @@ export function Input({
           onEnter(e);
         }
 
+        if (e.key === 'Escape' && onEscape) {
+          onEscape(e);
+        }
+
         nativeProps.onKeyDown?.(e);
       }}
       onChange={e => {

packages/desktop-client/src/components/sidebar/SidebarWithData.tsx

@@ -59,6 +59,17 @@ function EditableBudgetName({ prefs, savePrefs }: EditableBudgetNameProps) {
     { name: 'close', text: 'Close file' },
   ];
 
+  const onSaveChanges = async e => {
+    const inputEl = e.target;
+    const newBudgetName = inputEl.value;
+    if (newBudgetName.trim() !== '') {
+      await savePrefs({
+        budgetName: inputEl.value,
+      });
+      setEditing(false);
+    }
+  };
+
   if (editing) {
     return (
       <InitialFocus>
@@ -69,17 +80,9 @@ function EditableBudgetName({ prefs, savePrefs }: EditableBudgetNameProps) {
             fontWeight: 500,
           }}
           defaultValue={prefs.budgetName}
-          onEnter={async e => {
-            const inputEl = e.target as HTMLInputElement;
-            const newBudgetName = inputEl.value;
-            if (newBudgetName.trim() !== '') {
-              await savePrefs({
-                budgetName: inputEl.value,
-              });
-              setEditing(false);
-            }
-          }}
-          onBlur={() => setEditing(false)}
+          onEnter={onSaveChanges}
+          onBlur={onSaveChanges}
+          onEscape={() => setEditing(false)}
         />
       </InitialFocus>
     );

upcoming-release-notes/2327.md

+---
+category: Bugfix
+authors: [jfdoming]
+---
+
+Save budget/account name fields on blur