Fix budget amount not saved when clicking on another budget cell (#1965)

* Fix budget amount not saved when clicking on another budget cell

* Release notes

packages/desktop-client/src/components/budget/MobileBudgetTable.js

@@ -151,43 +151,42 @@ function BudgetCell({
 
   return (
     <View style={style}>
-      {isEditing ? (
-        <AmountInput
-          initialValue={sheetValue}
-          zeroSign="+"
+      <AmountInput
+        initialValue={sheetValue}
+        zeroSign="+"
+        style={{
+          ...(!isEditing && { display: 'none' }),
+          height: ROW_HEIGHT,
+          transform: 'translateX(6px)',
+        }}
+        focused={isEditing}
+        textStyle={{ ...styles.smallText, ...textStyle }}
+        onChange={updateBudgetAmount}
+        onBlur={() => onEdit?.(null)}
+      />
+      <View
+        role="button"
+        style={{
+          ...(isEditing && { display: 'none' }),
+          justifyContent: 'center',
+          alignItems: 'flex-end',
+          height: ROW_HEIGHT,
+        }}
+      >
+        <CellValue
+          binding={binding}
+          type="financial"
           style={{
-            height: ROW_HEIGHT,
-            transform: 'translateX(6px)',
+            ...styles.smallText,
+            ...textStyle,
+            ...styles.underlinedText,
           }}
-          focused={isEditing}
-          textStyle={{ ...styles.smallText, ...textStyle }}
-          onChange={updateBudgetAmount}
-          onBlur={() => onEdit?.(null)}
+          getStyle={makeAmountGrey}
+          data-testid={name}
+          onPointerUp={onAmountClick}
+          onPointerDown={e => e.preventDefault()}
         />
-      ) : (
-        <View
-          role="button"
-          style={{
-            justifyContent: 'center',
-            alignItems: 'flex-end',
-            height: ROW_HEIGHT,
-          }}
-        >
-          <CellValue
-            binding={binding}
-            type="financial"
-            style={{
-              ...styles.smallText,
-              ...textStyle,
-              ...styles.underlinedText,
-            }}
-            getStyle={makeAmountGrey}
-            data-testid={name}
-            onPointerUp={onAmountClick}
-            onPointerDown={e => e.preventDefault()}
-          />
-        </View>
-      )}
+      </View>
     </View>
   );
 }

packages/desktop-client/src/components/util/AmountInput.tsx

@@ -1,4 +1,4 @@
-import React, { type MutableRefObject, useRef, useState } from 'react';
+import React, { type Ref, useRef, useState, useEffect } from 'react';
 
 import evalArithmetic from 'loot-core/src/shared/arithmetic';
 import { amountToInteger } from 'loot-core/src/shared/util';
@@ -14,7 +14,7 @@ import useFormat from '../spreadsheet/useFormat';
 
 type AmountInputProps = {
   id?: string;
-  inputRef?: MutableRefObject<HTMLInputElement>;
+  inputRef?: Ref<HTMLInputElement>;
   initialValue: number;
   zeroSign?: '-' | '+';
   onChange?: (value: number) => void;
@@ -39,8 +39,11 @@ export function AmountInput({
   let [negative, setNegative] = useState(
     (initialValue === 0 && zeroSign === '-') || initialValue < 0,
   );
+
   let initialValueAbsolute = format(Math.abs(initialValue), 'financial');
   let [value, setValue] = useState(initialValueAbsolute);
+  useEffect(() => setValue(initialValueAbsolute), [initialValueAbsolute]);
+
   let buttonRef = useRef();
 
   function onSwitch() {
@@ -64,6 +67,12 @@ export function AmountInput({
   let ref = useRef<HTMLInputElement>();
   let mergedRef = useMergedRefs<HTMLInputElement>(inputRef, ref);
 
+  useEffect(() => {
+    if (focused) {
+      ref.current?.focus();
+    }
+  }, [focused]);
+
   function onInputAmountBlur(e) {
     fireChange(value, negative);
     if (!ref.current?.contains(e.relatedTarget)) {

upcoming-release-notes/1965.md

@@ -0,0 +1,6 @@
+---
+category: Bugfix
+authors: [joel-jeremy]
+---
+
+Fix mobile budget cell save issue