fix: trigger onChange twice when inputting using the input method

src/Input.tsx

@@ -98,47 +98,57 @@ const Input = forwardRef<InputRef, InputProps>((props, ref) => {
       | React.CompositionEvent<HTMLInputElement>,
     currentValue: string,
   ) => {
-    let cutValue = currentValue;
+    setValue(currentValue);
+    if (inputRef.current) {
+      resolveOnChange(inputRef.current, e, onChange, currentValue);
+    }
+  };
 
+  React.useEffect(() => {
+    if (selection) {
+      inputRef.current?.setSelectionRange(...selection);
+    }
+  }, [selection]);
+
+  const onInternalFormatter = (currentValue: string) => {
+    let cutValue = currentValue;
+    let isExceed = false;
     if (
       !compositionRef.current &&
       countConfig.exceedFormatter &&
       countConfig.max &&
       countConfig.strategy(currentValue) > countConfig.max
     ) {
-      cutValue = countConfig.exceedFormatter(currentValue, {
-        max: countConfig.max,
+      isExceed = true;
+      cutValue = countConfig.exceedFormatter!(currentValue, {
+        max: countConfig.max!,
       });
-
       if (currentValue !== cutValue) {
         setSelection([
           inputRef.current?.selectionStart || 0,
           inputRef.current?.selectionEnd || 0,
         ]);
       }
     }
-    setValue(cutValue);
-
-    if (inputRef.current) {
-      resolveOnChange(inputRef.current, e, onChange, cutValue);
-    }
+    return {
+      cutValue,
+      isExceed,
+    };
   };
 
-  React.useEffect(() => {
-    if (selection) {
-      inputRef.current?.setSelectionRange(...selection);
-    }
-  }, [selection]);
-
   const onInternalChange: React.ChangeEventHandler<HTMLInputElement> = (e) => {
-    triggerChange(e, e.target.value);
+    const { cutValue } = onInternalFormatter(e.target.value);
+    triggerChange(e, cutValue);
   };
 
   const onInternalCompositionEnd = (
     e: React.CompositionEvent<HTMLInputElement>,
   ) => {
     compositionRef.current = false;
-    triggerChange(e, e.currentTarget.value);
+    const { cutValue, isExceed } = onInternalFormatter(e.currentTarget.value);
+    if (isExceed) {
+      triggerChange(e, cutValue);
+    }
     onCompositionEnd?.(e);
   };
 

tests/count.test.tsx

@@ -109,6 +109,45 @@ describe('Input.Count', () => {
     expect(setSelectionRange).toHaveBeenCalledWith(2, 2);
   });
 
+  it('input using the input method should trigger onChange once', () => {
+    const onChange = jest.fn();
+    const { container } = render(<Input onChange={onChange} />);
+    const input = container.querySelector('input')!;
+    fireEvent.compositionStart(input);
+    fireEvent.compositionUpdate(input, { data: '你' });
+    fireEvent.compositionEnd(input, { data: '你好' });
+    fireEvent.input(input, { target: { value: '你好' } });
+    expect(onChange).toHaveBeenCalledTimes(1);
+  });
+
+  it('using the input method to enter the cropped content should trigger onChange twice', () => {
+    const onChange = jest.fn();
+    const onCompositionEnd = jest.fn();
+    const { container } = render(
+      <Input
+        count={{
+          show: true,
+          max: 3,
+          exceedFormatter: (val, { max }) =>
+            getSegments(val)
+              .filter((seg) => seg.index + seg.segment.length <= max)
+              .map((seg) => seg.segment)
+              .join(''),
+        }}
+        onChange={onChange}
+        onCompositionEnd={onCompositionEnd}
+      />,
+    );
+    const input = container.querySelector('input')!;
+    fireEvent.compositionStart(input);
+    fireEvent.compositionUpdate(input, { target: { value: '你' } });
+    fireEvent.compositionUpdate(input, { target: { value: '你好' } });
+    fireEvent.compositionUpdate(input, { target: { value: '你好世' } });
+    fireEvent.compositionUpdate(input, { target: { value: '你好世界' } });
+    fireEvent.compositionEnd(input, { target: { value: '你好世界' } });
+    expect(input?.value).toEqual('你好世');
+  });
+
   describe('cls', () => {
     it('raw', () => {
       const { container } = render(