Auto insert decimals to mobile split transaction amounts (#2746)

* Auto insert decimals to mobile split transaction amounts

* autoDecimals prop

* Fix typecheck error

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

@@ -9,9 +9,9 @@ import React, {
 } from 'react';
 
 import {
-  toRelaxedNumber,
   amountToCurrency,
-  getNumberFormat,
+  appendDecimals,
+  currencyToAmount,
 } from 'loot-core/src/shared/util';
 
 import { useLocalPref } from '../../../hooks/useLocalPref';
@@ -67,10 +67,6 @@ const AmountInput = memo(function AmountInput({
     setValue(initialValue);
   }, [initialValue]);
 
-  const parseText = () => {
-    return toRelaxedNumber(text.replace(/[,.]/, getNumberFormat().separator));
-  };
-
   const onKeyUp: HTMLProps<HTMLInputElement>['onKeyUp'] = e => {
     if (e.key === 'Backspace' && text === '') {
       setEditing(true);
@@ -83,7 +79,7 @@ const AmountInput = memo(function AmountInput({
   };
 
   const applyText = () => {
-    const parsed = parseText();
+    const parsed = currencyToAmount(text) || 0;
     const newValue = editing ? parsed : value;
 
     setValue(Math.abs(newValue));
@@ -111,16 +107,7 @@ const AmountInput = memo(function AmountInput({
   };
 
   const onChangeText = (text: string) => {
-    if (text.slice(-1) === '.') {
-      text = text.slice(0, -1);
-    }
-    if (!hideFraction) {
-      text = text.replaceAll(/[,.]/g, '');
-      text = text.replace(/^0+(?!$)/, '');
-      text = text.padStart(3, '0');
-      text = text.slice(0, -2) + '.' + text.slice(-2);
-    }
-
+    text = appendDecimals(text, hideFraction);
     setEditing(true);
     setText(text);
     props.onChangeValue?.(text);
@@ -163,7 +150,7 @@ const AmountInput = memo(function AmountInput({
         }}
         data-testid="amount-fake-input"
       >
-        {editing ? amountToCurrency(text) : amountToCurrency(value)}
+        {editing ? text : amountToCurrency(value)}
       </Text>
     </View>
   );

packages/desktop-client/src/components/mobile/transactions/TransactionEdit.jsx

@@ -333,6 +333,7 @@ const ChildTransactionEdit = forwardRef(
                   onClearActiveEdit();
                 }
               }}
+              autoDecimals={true}
             />
           </View>
         </View>

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

@@ -8,8 +8,9 @@ import React, {
 } from 'react';
 
 import { evalArithmetic } from 'loot-core/src/shared/arithmetic';
-import { amountToInteger } from 'loot-core/src/shared/util';
+import { amountToInteger, appendDecimals } from 'loot-core/src/shared/util';
 
+import { useLocalPref } from '../../hooks/useLocalPref';
 import { useMergedRefs } from '../../hooks/useMergedRefs';
 import { SvgAdd, SvgSubtract } from '../../icons/v1';
 import { type CSSProperties, theme } from '../../style';
@@ -31,6 +32,7 @@ type AmountInputProps = {
   textStyle?: CSSProperties;
   focused?: boolean;
   disabled?: boolean;
+  autoDecimals?: boolean;
 };
 
 export function AmountInput({
@@ -46,6 +48,7 @@ export function AmountInput({
   textStyle,
   focused,
   disabled = false,
+  autoDecimals = false,
 }: AmountInputProps) {
   const format = useFormat();
   const negative = (initialValue === 0 && zeroSign === '-') || initialValue < 0;
@@ -57,6 +60,7 @@ export function AmountInput({
   const buttonRef = useRef();
   const ref = useRef<HTMLInputElement>(null);
   const mergedRef = useMergedRefs<HTMLInputElement>(inputRef, ref);
+  const [hideFraction = false] = useLocalPref('hideFraction');
 
   useEffect(() => {
     if (focused) {
@@ -74,6 +78,7 @@ export function AmountInput({
   }
 
   function onInputTextChange(val) {
+    val = autoDecimals ? appendDecimals(val, hideFraction) : val;
     setValue(val ? val : '');
     onChangeValue?.(val);
   }

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

@@ -199,6 +199,24 @@ export function titleFirst(str: string) {
   return str[0].toUpperCase() + str.slice(1);
 }
 
+export function appendDecimals(
+  amountText: string,
+  hideDecimals = false,
+): string {
+  const { separator } = getNumberFormat();
+  let result = amountText;
+  if (result.slice(-1) === separator) {
+    result = result.slice(0, -1);
+  }
+  if (!hideDecimals) {
+    result = result.replaceAll(/[,.]/g, '');
+    result = result.replace(/^0+(?!$)/, '');
+    result = result.padStart(3, '0');
+    result = result.slice(0, -2) + separator + result.slice(-2);
+  }
+  return amountToCurrency(currencyToAmount(result));
+}
+
 type NumberFormats =
   | 'comma-dot'
   | 'dot-comma'

upcoming-release-notes/2746.md

+---
+category: Enhancements
+authors: [joel-jeremy]
+---
+
+Auto insert decimals to mobile split transaction amounts.