diff --git a/packages/desktop-client/src/components/accounts/Header.jsx b/packages/desktop-client/src/components/accounts/Header.jsx index 3c4f79a78a64bffd83bf6d5609309e216d623ad1..4e181a5146c4449d06e0a24a8302793e367c45fd 100644 --- a/packages/desktop-client/src/components/accounts/Header.jsx +++ b/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, diff --git a/packages/desktop-client/src/components/common/Input.tsx b/packages/desktop-client/src/components/common/Input.tsx index 342c1e75c8f60d0b0190e2958ae7bd2d534b8bbc..390473a405cae56456a1b55ab4a52daa671a75c2 100644 --- a/packages/desktop-client/src/components/common/Input.tsx +++ b/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 => { diff --git a/packages/desktop-client/src/components/sidebar/SidebarWithData.tsx b/packages/desktop-client/src/components/sidebar/SidebarWithData.tsx index 32668b2487c457671de2d3a837b0d7407614c1eb..af8010f64d4447a0659db8167e58b5381c24641c 100644 --- a/packages/desktop-client/src/components/sidebar/SidebarWithData.tsx +++ b/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> ); diff --git a/upcoming-release-notes/2327.md b/upcoming-release-notes/2327.md new file mode 100644 index 0000000000000000000000000000000000000000..5d1de94fc8f3d8be48cdfc935431d01e915bbefe --- /dev/null +++ b/upcoming-release-notes/2327.md @@ -0,0 +1,6 @@ +--- +category: Bugfix +authors: [jfdoming] +--- + +Save budget/account name fields on blur