fix: Selection not keep in sync (#52)

* chore: back of selection

* test: add test case

* chore: lint

* chore: lint

Author: zombieJ

src/Input.tsx

@@ -57,6 +57,11 @@ const Input = forwardRef<InputRef, InputProps>((props, ref) => {
   const formatValue =
     value === undefined || value === null ? '' : String(value);
 
+  // =================== Select Range ===================
+  const [selection, setSelection] = React.useState<
+    [start: number, end: number] | null
+  >(null);
+
   // ====================== Count =======================
   const countConfig = useCount(count, showCount);
   const mergedMax = countConfig.max || maxLength;
@@ -104,6 +109,13 @@ const Input = forwardRef<InputRef, InputProps>((props, ref) => {
       cutValue = countConfig.exceedFormatter(currentValue, {
         max: countConfig.max,
       });
+
+      if (currentValue !== cutValue) {
+        setSelection([
+          inputRef.current?.selectionStart || 0,
+          inputRef.current?.selectionEnd || 0,
+        ]);
+      }
     }
     setValue(cutValue);
 
@@ -112,6 +124,12 @@ const Input = forwardRef<InputRef, InputProps>((props, ref) => {
     }
   };
 
+  React.useEffect(() => {
+    if (selection) {
+      inputRef.current?.setSelectionRange(...selection);
+    }
+  }, [selection]);
+
   const onInternalChange: React.ChangeEventHandler<HTMLInputElement> = (e) => {
     triggerChange(e, e.target.value);
   };

tests/count.test.tsx

@@ -83,6 +83,32 @@ describe('Input.Count', () => {
     expect(onCompositionEnd).toHaveBeenCalled();
   });
 
+  it('exceedFormatter selection', () => {
+    const { container } = render(
+      <Input
+        count={{
+          show: true,
+          max: 3,
+          exceedFormatter: (val, { max }) => val.slice(0, max),
+        }}
+        defaultValue={'123'}
+      />,
+    );
+
+    const input = container.querySelector('input')!;
+    const setSelectionRange = jest.spyOn(input, 'setSelectionRange');
+
+    fireEvent.change(input, {
+      target: {
+        selectionStart: 2,
+        selectionEnd: 2,
+        value: '1a23',
+      },
+    });
+
+    expect(setSelectionRange).toHaveBeenCalledWith(2, 2);
+  });
+
   describe('cls', () => {
     it('raw', () => {
       const { container } = render(

tsconfig.json

@@ -4,7 +4,7 @@
     "module": "ESNext",
     "moduleResolution": "node",
     "baseUrl": "./",
-    "lib": ["dom", "es2017", "es2022"],
+    "lib": ["dom", "es2017", "es2022", "esnext"],
     "jsx": "react",
     "strict": true,
     "esModuleInterop": true,