@momo-kits/foundation 0.165.2-beta.2 → 0.165.2-beta.3

package/Input/InputMoney.tsx

@@ -4,6 +4,7 @@ import React, {
   useContext,
   useEffect,
   useImperativeHandle,
+  useLayoutEffect,
   useRef,
   useState,
 } from 'react';
@@ -190,8 +191,14 @@ const InputMoney = forwardRef(
     const [focused, setFocused] = useState(false);
     const [displayValue, setDisplayValue] = useState('');
     const [numericValue, setNumericValue] = useState('');
-    const [selection, setSelection] = useState<Selection>();
+    const [commitCount, setCommitCount] = useState(0);
+    const displayRef = useRef('');
     const selectionRef = useRef<Selection>({ start: 0, end: 0 });
+    // Caret to push to native once the committed text is rendered.
+    const pendingCaretRef = useRef<number | null>(null);
+    // Caret the native input reports for the raw, unformatted text. On iOS that
+    // event lands after onChangeText and must not override the formatted caret.
+    const rawCaretRef = useRef<number | null>(null);
     const inputRef = useRef<TextInput>(null);
     const componentName = 'InputMoney';
 
@@ -216,14 +223,29 @@ const InputMoney = forwardRef(
       }
     }, [value]);
 
+    // Always set the caret imperatively: a controlled `selection` prop is only
+    // sent to native when it differs from the last native selection, so it is
+    // skipped whenever a stale selection event already reported the same value.
+    useLayoutEffect(() => {
+      const caret = pendingCaretRef.current;
+      if (caret === null) return;
+      pendingCaretRef.current = null;
+      if (inputRef.current?.isFocused()) {
+        inputRef.current.setSelection(caret, caret);
+      }
+    }, [commitCount]);
+
     const commit = (digits: string, caretDigit: number) => {
       const display = digits ? `${groupDigits(digits)}${currency}` : '';
       const caret = caretFromDigitIndex(display, caretDigit);
+      const changed = digits !== numericValue;
+      displayRef.current = display;
       selectionRef.current = { start: caret, end: caret };
-      setSelection({ start: caret, end: caret });
+      pendingCaretRef.current = caret;
+      setCommitCount(count => count + 1);
       setDisplayValue(display);
       setNumericValue(digits);
-      return digits !== numericValue;
+      return changed;
     };
 
     const parseInputText = (text: string): string => {
@@ -241,13 +263,18 @@ const InputMoney = forwardRef(
     };
 
     const _onChangeText = (text: string) => {
-      const { digits, caretDigit } = text
-        ? applyEdit(
-            displayValue,
-            detectEdit(displayValue, text, selectionRef.current),
-            digitLimit,
-          )
-        : { digits: '', caretDigit: 0 };
+      let digits = '';
+      let caretDigit = 0;
+      rawCaretRef.current = 0;
+      if (text) {
+        const edit = detectEdit(displayRef.current, text, selectionRef.current);
+        rawCaretRef.current = edit.start + edit.inserted.length;
+        ({ digits, caretDigit } = applyEdit(
+          displayRef.current,
+          edit,
+          digitLimit,
+        ));
+      }
       if (commit(digits, caretDigit)) {
         onChangeText?.(digits);
       }
@@ -257,11 +284,20 @@ const InputMoney = forwardRef(
     const _onSelectionChange = (
       e: NativeSyntheticEvent<TextInputSelectionChangeEventData>,
     ) => {
-      const { start, end } = e.nativeEvent.selection;
-      selectionRef.current = { start, end };
-      const max = displayValue ? displayValue.length - currency.length : 0;
-      setSelection({ start: Math.min(start, max), end: Math.min(end, max) });
       props.onSelectionChange?.(e);
+      const { start, end } = e.nativeEvent.selection;
+      const rawCaret = rawCaretRef.current;
+      rawCaretRef.current = null;
+      if (start === end && start === rawCaret) {
+        return;
+      }
+      const display = displayRef.current;
+      const max = display ? display.length - currency.length : 0;
+      const clamped = { start: Math.min(start, max), end: Math.min(end, max) };
+      selectionRef.current = clamped;
+      if (clamped.start !== start || clamped.end !== end) {
+        inputRef.current?.setSelection(clamped.start, clamped.end);
+      }
     };
 
     const _onFocus = (e: NativeSyntheticEvent<TextInputFocusEventData>) => {
@@ -352,7 +388,6 @@ const InputMoney = forwardRef(
               textBreakStrategy="highQuality"
               value={displayValue}
               onChangeText={_onChangeText}
-              selection={selection}
               onSelectionChange={_onSelectionChange}
               onFocus={_onFocus}
               onBlur={_onBlur}

package/package.json

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