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

package/Input/InputMoney.tsx

@@ -32,9 +32,26 @@ import {
 } from './common';
 import { InputMoneyProps } from './index';
 import styles from './styles';
-import { formatNumberToMoney } from './utils';
 import SystemTextInput from './SystemTextInput';
 
+// Finds the common prefix and suffix of `old` and `text`; `size` counts the
+// characters removed plus inserted between them.
+const findEdit = (old: string, text: string) => {
+  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;
+  }
+  const size = old.length + text.length - 2 * (start + suffix);
+  return { old, start, suffix, size };
+};
+
 const InputMoney = forwardRef(
   (
     {
@@ -76,6 +93,11 @@ const InputMoney = forwardRef(
     const [lastDisplayValue, setLastDisplayValue] = useState('');
     const inputRef = useRef<TextInput>(null);
     const caretDigitsAfter = useRef<number | undefined>(undefined);
+    const lastRawText = useRef('');
+    const [caretSelection, setCaretSelection] = useState<{
+      start: number;
+      end: number;
+    }>();
     const componentName = 'InputMoney';
 
     const showBaseLineDebug = context?.features?.showBaseLineDebug ?? false;
@@ -100,30 +122,40 @@ const InputMoney = forwardRef(
       }
     }, [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);
+    }, [displayValue]);
+
+    // The selection only rides along with the render that reformats the text,
+    // then it is released so the user can move the caret freely.
+    useEffect(() => {
+      if (!caretSelection) return;
+      // A newer keystroke may already have queued its own selection; keep it.
+      setCaretSelection(current =>
+        current === caretSelection ? undefined : current,
+      );
+    }, [caretSelection]);
+
+    const updateDisplayValue = (numeric: string) => {
+      // Group the digit string directly: Number() loses precision past 15
+      // digits and switches to "1e+21" notation past 20.
+      const formatted = numeric.replace(/\B(?=(\d{3})+(?!\d))/g, '.');
+      const next = formatted ? `${formatted}${currency}` : '';
+      setDisplayValue(next);
+
+      // Android moves the caret proportionally when the text is replaced, so
+      // it lands before the typed digit once a separator is added. Send the
+      // caret together with the text so a fast keystroke can't land in between.
       const digitsAfter = caretDigitsAfter.current;
       caretDigitsAfter.current = undefined;
       if (Platform.OS !== 'android' || digitsAfter === undefined) return;
-      let before = parseInputText(displayValue).length - digitsAfter;
+      let before = parseInputText(next).length - digitsAfter;
       let caret = 0;
-      while (before > 0 && caret < displayValue.length) {
-        if (/\d/.test(displayValue[caret])) before -= 1;
+      while (before > 0 && caret < next.length) {
+        if (/\d/.test(next[caret])) before -= 1;
         caret += 1;
       }
-      inputRef.current?.setSelection(caret, caret);
-    }, [displayValue]);
-
-    const updateDisplayValue = (numeric: string) => {
-      if (!numeric) {
-        setDisplayValue('');
-        return;
-      }
-      const formatted = formatNumberToMoney(Number(numeric));
-      setDisplayValue(formatted ? `${formatted}${currency}` : '');
+      setCaretSelection({ start: caret, end: caret });
     };
 
     const parseInputText = (text: string): string => {
@@ -153,23 +185,21 @@ const InputMoney = forwardRef(
 
     const _onChangeText = (text: string) => {
       if (!text) {
+        lastRawText.current = '';
         setDisplayValue('');
         setNumericValue('');
         onChangeText?.('');
         return;
       }
-      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;
-      }
+      // When typing outpaces JS (slow Android devices) native rejects the stale
+      // formatted text and keeps the raw one, so the edit may apply to either.
+      // Pick the one that differs from the new text by a single edit.
+      const raw = lastRawText.current;
+      lastRawText.current = text;
+      const formattedEdit = findEdit(lastDisplayValue, text);
+      const rawEdit = findEdit(raw, text);
+      const { old, start, suffix } =
+        raw && rawEdit.size < formattedEdit.size ? rawEdit : formattedEdit;
       caretDigitsAfter.current = text
         .slice(text.length - suffix)
         .replace(/\D/g, '').length;
@@ -276,6 +306,7 @@ const InputMoney = forwardRef(
               allowFontScaling={false}
               textBreakStrategy="highQuality"
               value={displayValue}
+              selection={caretSelection ?? props.selection}
               onChangeText={_onChangeText}
               onFocus={_onFocus}
               onBlur={_onBlur}

package/package.json

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