Mobile auto decimal (#2536)

* Format the input field when entering transaction value, automatically populate decimal position.

* Add note.

* Fix linting issues.

* Turn off autoDecimal if we're hiding decimals anyway.

* Shorten changelog.

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

@@ -6,6 +6,7 @@ import {
   getNumberFormat,
 } from 'loot-core/src/shared/util';
 
+import { useLocalPref } from '../../../hooks/useLocalPref';
 import { useMergedRefs } from '../../../hooks/useMergedRefs';
 import { theme } from '../../../style';
 import { Button } from '../../common/Button';
@@ -22,6 +23,7 @@ const AmountInput = memo(function AmountInput({
   const [text, setText] = useState('');
   const [value, setValue] = useState(0);
   const inputRef = useRef();
+  const [hideFraction = false] = useLocalPref('hideFraction');
   const mergedInputRef = useMergedRefs(props.inputRef, inputRef);
 
   const initialValue = Math.abs(props.value);
@@ -69,6 +71,16 @@ const AmountInput = memo(function AmountInput({
   };
 
   const onChangeText = text => {
+    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);
+    }
+
     setEditing(true);
     setText(text);
     props.onChange?.(text);
@@ -108,7 +120,7 @@ const AmountInput = memo(function AmountInput({
         data-testid="amount-fake-input"
         pointerEvents="none"
       >
-        {editing ? text : amountToCurrency(value)}
+        {editing ? amountToCurrency(text) : amountToCurrency(value)}
       </Text>
     </View>
   );

upcoming-release-notes/2536.md

@@ -0,0 +1,6 @@
+---
+category: Enhancements
+authors: [ilar]
+---
+
+When adding a mobile view transaction, format the edit field according to the currency and add an automatic/fixed position decimal when applicable.