fix: reapply thousand separators before passing input to appendDecimals

This ensures that the input going into `appendDecimals` is not malformed when the  `hideFraction` option is On, otherwise when hitting delete on the text `"1,234,567"`, it will result in the text `"1,234,56"` which the formatter will parse as `1234.56`. This doesn't happen when `hideFraction` is off since hitting delete on the text `"12,345.67"` results in `"12,345.6"`, which `appendDecimals` will happily handle in a separate case to provide `"1234.56"` as the input into `currencyToAmount`.

Author: intagaming

packages/desktop-client/src/components/mobile/transactions/FocusableAmountInput.tsx

@@ -19,6 +19,7 @@ import {
   amountToCurrency,
   appendDecimals,
   currencyToAmount,
+  reapplyThousandSeparators,
 } from 'loot-core/shared/util';
 
 import { makeAmountFullStyle } from '@desktop-client/components/budget/util';
@@ -113,6 +114,7 @@ const AmountInput = memo(function AmountInput({
   };
 
   const onChangeText = (text: string) => {
+    text = reapplyThousandSeparators(text);
     text = appendDecimals(text, String(hideFraction) === 'true');
     setEditing(true);
     setText(text);

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

@@ -18,7 +18,11 @@ import { View } from '@actual-app/components/view';
 import { css, cx } from '@emotion/css';
 
 import { evalArithmetic } from 'loot-core/shared/arithmetic';
-import { amountToInteger, appendDecimals } from 'loot-core/shared/util';
+import {
+  amountToInteger,
+  appendDecimals,
+  reapplyThousandSeparators,
+} from 'loot-core/shared/util';
 
 import { useFormat } from '@desktop-client/hooks/useFormat';
 import { useMergedRefs } from '@desktop-client/hooks/useMergedRefs';
@@ -96,6 +100,7 @@ export function AmountInput({
   }
 
   function onInputTextChange(val) {
+    val = reapplyThousandSeparators(val);
     val = autoDecimals
       ? appendDecimals(val, String(hideFraction) === 'true')
       : val;

packages/loot-core/src/shared/util.ts

@@ -214,6 +214,17 @@ export function titleFirst(str: string | null | undefined) {
   return str[0].toUpperCase() + str.slice(1);
 }
 
+export function reapplyThousandSeparators(amountText: string) {
+  const { decimalSeparator, thousandsSeparator } = getNumberFormat();
+  const [integerPartRaw, decimalPart = ''] = amountText.split(decimalSeparator);
+  const integerPart = Number(integerPartRaw.replaceAll(thousandsSeparator, ''))
+    .toLocaleString('en-US')
+    .replaceAll(',', thousandsSeparator);
+  return decimalPart
+    ? integerPart + decimalSeparator + decimalPart
+    : integerPart;
+}
+
 export function appendDecimals(
   amountText: string,
   hideDecimals = false,

upcoming-release-notes/5220.md

@@ -0,0 +1,6 @@
+---
+category: Bugfix
+authors: [intagaming]
+---
+
+Reapply thousand separators before passing input to appendDecimals