@momo-kits/foundation 0.168.1-beta.3 → 0.168.1-beta.4

package/Input/InputMoney.tsx

@@ -8,6 +8,7 @@ import React, {
   useState,
 } from 'react';
 import {
+  Platform,
   TextInput,
   TextInputFocusEvent,
   TouchableOpacity,
@@ -74,6 +75,7 @@ const InputMoney = forwardRef(
     const [numericValue, setNumericValue] = useState('');
     const [lastDisplayValue, setLastDisplayValue] = useState('');
     const inputRef = useRef<TextInput>(null);
+    const caretDigitsAfter = useRef<number | undefined>(undefined);
     const componentName = 'InputMoney';
 
     const showBaseLineDebug = context?.features?.showBaseLineDebug ?? false;
@@ -91,14 +93,28 @@ const InputMoney = forwardRef(
       if (value !== undefined && typeof value === 'string') {
         const cleanValue = value.replace(/\D/g, '').replace(/^0+(?=\d)/, '');
         if (cleanValue !== numericValue) {
+          caretDigitsAfter.current = undefined;
           setNumericValue(cleanValue);
           updateDisplayValue(cleanValue);
         }
       }
     }, [value]);
 
+    // Android moves the caret proportionally when the text is replaced, so it
+    // lands before the typed digit once a separator is added. Put it back after
+    // the same digit.
     useEffect(() => {
       setLastDisplayValue(displayValue);
+      const digitsAfter = caretDigitsAfter.current;
+      caretDigitsAfter.current = undefined;
+      if (Platform.OS !== 'android' || digitsAfter === undefined) return;
+      let before = parseInputText(displayValue).length - digitsAfter;
+      let caret = 0;
+      while (before > 0 && caret < displayValue.length) {
+        if (/\d/.test(displayValue[caret])) before -= 1;
+        caret += 1;
+      }
+      inputRef.current?.setSelection(caret, caret);
     }, [displayValue]);
 
     const updateDisplayValue = (numeric: string) => {
@@ -142,19 +158,22 @@ const InputMoney = forwardRef(
         onChangeText?.('');
         return;
       }
-      if (text.length < lastDisplayValue.length) {
-        const old = lastDisplayValue;
-        let start = 0;
-        while (start < text.length && old[start] === text[start]) {
-          start += 1;
-        }
-        let suffix = 0;
-        while (
-          suffix < text.length - start &&
-          old[old.length - 1 - suffix] === text[text.length - 1 - suffix]
-        ) {
-          suffix += 1;
-        }
+      const old = lastDisplayValue;
+      let start = 0;
+      while (start < text.length && old[start] === text[start]) {
+        start += 1;
+      }
+      let suffix = 0;
+      while (
+        suffix < Math.min(text.length, old.length) - start &&
+        old[old.length - 1 - suffix] === text[text.length - 1 - suffix]
+      ) {
+        suffix += 1;
+      }
+      caretDigitsAfter.current = text
+        .slice(text.length - suffix)
+        .replace(/\D/g, '').length;
+      if (text.length < old.length) {
         const removed = old.slice(start, old.length - suffix);
         if (!/\d/.test(removed)) {
           const index = removed.includes('.')
@@ -183,6 +202,7 @@ const InputMoney = forwardRef(
     };
 
     const _setText = (text: string) => {
+      caretDigitsAfter.current = undefined;
       if (!text) {
         setDisplayValue('');
         setNumericValue('');

package/package.json

@@ -1,6 +1,6 @@
 {
     "name": "@momo-kits/foundation",
-    "version": "0.168.1-beta.3",
+    "version": "0.168.1-beta.4",
     "description": "React Native Component Kits",
     "main": "index.ts",
     "scripts": {},