From 5a1188c46886875d5d781c57e34067584bde3767 Mon Sep 17 00:00:00 2001
From: wnx <jiadesen1993@163.com>
Date: Sun, 18 Dec 2022 10:29:30 +0800
Subject: [PATCH] fix(Field): incorrect cursor position when value length
 exceeds maxlength or when formatter is used (#11360)

---
 packages/vant/src/field/Field.tsx | 61 +++++++++++++++++++++++++------
 1 file changed, 50 insertions(+), 11 deletions(-)

diff --git a/packages/vant/src/field/Field.tsx b/packages/vant/src/field/Field.tsx
index caa2be170..0b62d9c02 100644
--- a/packages/vant/src/field/Field.tsx
+++ b/packages/vant/src/field/Field.tsx
@@ -282,6 +282,15 @@ export default defineComponent({
         if (modelValue && getStringLength(modelValue) === +maxlength) {
           return modelValue;
         }
+        // Remove redundant interpolated values,
+        // make it consistent with the native input maxlength behavior.
+        const selectionEnd = inputRef.value?.selectionEnd;
+        if (state.focused && selectionEnd) {
+          const valueArr = [...value];
+          const exceededLength = valueArr.length - +maxlength;
+          valueArr.splice(selectionEnd - exceededLength, exceededLength);
+          return valueArr.join('');
+        }
         return cutString(value, +maxlength);
       }
       return value;
@@ -293,28 +302,58 @@ export default defineComponent({
     ) => {
       const originalValue = value;
       value = limitValueLength(value);
-      const isExceedLimit = value !== originalValue;
+      // When the value length exceeds maxlength,
+      // record the excess length for correcting the cursor position.
+      // https://github.com/youzan/vant/issues/11289
+      const limitDiffLen =
+        getStringLength(originalValue) - getStringLength(value);
 
       if (props.type === 'number' || props.type === 'digit') {
         const isNumber = props.type === 'number';
         value = formatNumber(value, isNumber, isNumber);
       }
 
+      let formatterDiffLen = 0;
       if (props.formatter && trigger === props.formatTrigger) {
-        value = props.formatter(value);
+        const { formatter, maxlength } = props;
+        value = formatter(value);
+        // The length of the formatted value may exceed maxlength.
+        if (isDef(maxlength) && getStringLength(value) > maxlength) {
+          value = cutString(value, +maxlength);
+        }
+        if (inputRef.value && state.focused) {
+          const { selectionEnd } = inputRef.value;
+          // The value before the cursor of the original value.
+          const bcoVal = cutString(originalValue, selectionEnd!);
+          // Record the length change of `bcoVal` after formatting,
+          // which is used to correct the cursor position.
+          formatterDiffLen =
+            getStringLength(formatter(bcoVal)) - getStringLength(bcoVal);
+        }
       }
 
       if (inputRef.value && inputRef.value.value !== value) {
-        // When the value length exceeds maxlength and the input is focused,
-        // correct the cursor position to be consistent with the native behavior.
-        // https://github.com/youzan/vant/issues/11289
-        if (state.focused && isExceedLimit) {
-          const { selectionStart, selectionEnd } = inputRef.value;
+        // When the input is focused, correct the cursor position.
+        if (state.focused) {
+          let { selectionStart, selectionEnd } = inputRef.value;
           inputRef.value.value = value;
-          inputRef.value.setSelectionRange(
-            selectionStart! - 1,
-            selectionEnd! - 1
-          );
+
+          if (isDef(selectionStart) && isDef(selectionEnd)) {
+            const valueLen = getStringLength(value);
+
+            if (limitDiffLen) {
+              selectionStart -= limitDiffLen;
+              selectionEnd -= limitDiffLen;
+            } else if (formatterDiffLen) {
+              selectionStart += formatterDiffLen;
+              selectionEnd += formatterDiffLen;
+            }
+
+            inputRef.value.setSelectionRange(
+              Math.min(selectionStart, valueLen),
+              Math.min(selectionEnd, valueLen)
+            );
+          }
         } else {
           inputRef.value.value = value;
         }