From 81b905966b4ec1964aaa5ccaab4f2f32c8cd3bb4 Mon Sep 17 00:00:00 2001
From: Joel Jeremy Marquez <joeljeremy.marquez@gmail.com>
Date: Fri, 12 Apr 2024 22:22:51 -0700
Subject: [PATCH] Close budget menu modal on enter

---
 .../mobile/transactions/FocusableAmountInput.tsx   | 14 +++++++++++---
 .../components/modals/ReportBudgetMenuModal.tsx    |  1 +
 .../components/modals/RolloverBudgetMenuModal.tsx  |  1 +
 3 files changed, 13 insertions(+), 3 deletions(-)

diff --git a/packages/desktop-client/src/components/mobile/transactions/FocusableAmountInput.tsx b/packages/desktop-client/src/components/mobile/transactions/FocusableAmountInput.tsx
index 85f7c6a0975..44ebf78f9bd 100644
--- a/packages/desktop-client/src/components/mobile/transactions/FocusableAmountInput.tsx
+++ b/packages/desktop-client/src/components/mobile/transactions/FocusableAmountInput.tsx
@@ -29,6 +29,7 @@ type AmountInputProps = {
   inputRef?: Ref<HTMLInputElement>;
   onFocus?: HTMLProps<HTMLInputElement>['onFocus'];
   onBlur?: HTMLProps<HTMLInputElement>['onBlur'];
+  onEnter?: HTMLProps<HTMLInputElement>['onKeyUp'];
   onChangeValue?: (value: string) => void;
   onUpdate?: (value: string) => void;
   onUpdateAmount?: (value: number) => void;
@@ -69,9 +70,14 @@ const AmountInput = memo(function AmountInput({
     return toRelaxedNumber(text.replace(/[,.]/, getNumberFormat().separator));
   };
 
-  const onKeyPress: HTMLProps<HTMLInputElement>['onKeyUp'] = e => {
+  const onKeyUp: HTMLProps<HTMLInputElement>['onKeyUp'] = e => {
     if (e.key === 'Backspace' && text === '') {
       setEditing(true);
+    } else if (e.key === 'Enter') {
+      props.onEnter?.(e);
+      if (!e.defaultPrevented) {
+        onUpdate(e.currentTarget.value);
+      }
     }
   };
 
@@ -97,8 +103,10 @@ const AmountInput = memo(function AmountInput({
   };
 
   const onBlur: HTMLProps<HTMLInputElement>['onBlur'] = e => {
-    onUpdate(e.target.value);
     props.onBlur?.(e);
+    if (!e.defaultPrevented) {
+      onUpdate(e.target.value);
+    }
   };
 
   const onChangeText = (text: string) => {
@@ -127,7 +135,7 @@ const AmountInput = memo(function AmountInput({
       onChange={e => onChangeText(e.target.value)}
       onFocus={onFocus}
       onBlur={onBlur}
-      onKeyUp={onKeyPress}
+      onKeyUp={onKeyUp}
       data-testid="amount-input"
       style={{ flex: 1, textAlign: 'center', position: 'absolute' }}
     />
diff --git a/packages/desktop-client/src/components/modals/ReportBudgetMenuModal.tsx b/packages/desktop-client/src/components/modals/ReportBudgetMenuModal.tsx
index 90f26af342d..1d994f67c07 100644
--- a/packages/desktop-client/src/components/modals/ReportBudgetMenuModal.tsx
+++ b/packages/desktop-client/src/components/modals/ReportBudgetMenuModal.tsx
@@ -77,6 +77,7 @@ export function ReportBudgetMenuModal({
           focused={amountFocused}
           onFocus={() => setAmountFocused(true)}
           onBlur={() => setAmountFocused(false)}
+          onEnter={() => modalProps.onClose()}
           zeroSign="+"
           focusedStyle={{
             width: 'auto',
diff --git a/packages/desktop-client/src/components/modals/RolloverBudgetMenuModal.tsx b/packages/desktop-client/src/components/modals/RolloverBudgetMenuModal.tsx
index e38bde4c1a1..c06e9178147 100644
--- a/packages/desktop-client/src/components/modals/RolloverBudgetMenuModal.tsx
+++ b/packages/desktop-client/src/components/modals/RolloverBudgetMenuModal.tsx
@@ -77,6 +77,7 @@ export function RolloverBudgetMenuModal({
           focused={amountFocused}
           onFocus={() => setAmountFocused(true)}
           onBlur={() => setAmountFocused(false)}
+          onEnter={() => modalProps.onClose()}
           zeroSign="+"
           focusedStyle={{
             width: 'auto',