fix: use committed count value during IME composition

src/Input.tsx

@@ -60,11 +60,14 @@ const Input = forwardRef<InputRef, InputProps>((props, ref) => {
     props.defaultValue,
     props.value,
   );
+  // Count-related state should reflect the committed value during IME composition
+  // instead of the intermediate phonetic text.
+  const [countValue, setCountValue] = useState(formatValue);
 
   const countConfig = useCount(count, showCount);
   const { isOutOfRange, dataCount } = useCountDisplay({
     countConfig,
-    value: formatValue,
+    value: countValue,
     maxLength,
   });
   const getExceedValue = useCountExceed({
@@ -99,6 +102,12 @@ const Input = forwardRef<InputRef, InputProps>((props, ref) => {
     setFocused((prev) => (prev && disabled ? false : prev));
   }, [disabled]);
 
+  useEffect(() => {
+    if (!compositionRef.current) {
+      setCountValue(formatValue);
+    }
+  }, [formatValue]);
+
   const triggerChange = (
     e:
       | React.ChangeEvent<HTMLInputElement>
@@ -114,6 +123,9 @@ const Input = forwardRef<InputRef, InputProps>((props, ref) => {
       return;
     }
     setValue(cutValue);
+    if (!compositionRef.current) {
+      setCountValue(cutValue);
+    }
 
     if (inputRef.current) {
       resolveOnChange(inputRef.current, e, onChange, cutValue);
@@ -227,6 +239,7 @@ const Input = forwardRef<InputRef, InputProps>((props, ref) => {
         type={type}
         onCompositionStart={(e) => {
           compositionRef.current = true;
+          setCountValue(formatValue);
           onCompositionStart?.(e);
         }}
         onCompositionEnd={onInternalCompositionEnd}

src/TextArea.tsx

@@ -60,10 +60,13 @@ const TextArea = React.forwardRef<TextAreaRef, TextAreaProps>(
     const getTextArea = () => resizableTextAreaRef.current?.textArea || null;
 
     const { setValue, formatValue } = useMergedValue(defaultValue, customValue);
+    // Count-related state should reflect the committed value during IME composition
+    // instead of the intermediate phonetic text.
+    const [countValue, setCountValue] = React.useState(formatValue);
     const countConfig = useCount(count, showCount);
     const { isOutOfRange, dataCount } = useCountDisplay({
       countConfig,
-      value: formatValue,
+      value: countValue,
       maxLength,
     });
     const getExceedValue = useCountExceed({
@@ -88,6 +91,12 @@ const TextArea = React.forwardRef<TextAreaRef, TextAreaProps>(
       setFocused((prev) => !disabled && prev);
     }, [disabled]);
 
+    useEffect(() => {
+      if (!compositionRef.current) {
+        setCountValue(formatValue);
+      }
+    }, [formatValue]);
+
     // ============================== Count ===============================
     // ============================== Change ==============================
     const triggerChange = (
@@ -98,6 +107,9 @@ const TextArea = React.forwardRef<TextAreaRef, TextAreaProps>(
     ) => {
       const cutValue = getExceedValue(currentValue, compositionRef.current);
       setValue(cutValue);
+      if (!compositionRef.current) {
+        setCountValue(cutValue);
+      }
 
       resolveOnChange(e.currentTarget, e, onChange, cutValue);
     };
@@ -107,6 +119,7 @@ const TextArea = React.forwardRef<TextAreaRef, TextAreaProps>(
       HTMLTextAreaElement
     > = (e) => {
       compositionRef.current = true;
+      setCountValue(formatValue);
       onCompositionStart?.(e);
     };
 

tests/TextArea.count.test.tsx

@@ -129,6 +129,28 @@ describe('TextArea.Count', () => {
     expect(container.querySelector('.rc-textarea-out-of-range')).toBeTruthy();
   });
 
+  it('should base showCount on committed value during IME composition', () => {
+    const { container } = render(
+      <TextArea count={{ show: true, max: 5 }} defaultValue="" />,
+    );
+    const textarea = container.querySelector('textarea')!;
+    const count = container.querySelector('.rc-textarea-data-count');
+
+    expect(count?.textContent).toEqual('0 / 5');
+
+    fireEvent.compositionStart(textarea);
+    fireEvent.change(textarea, { target: { value: 'zhu' } });
+
+    expect(textarea.value).toEqual('zhu');
+    expect(count?.textContent).toEqual('0 / 5');
+
+    fireEvent.compositionEnd(textarea, { target: { value: '竹' } });
+    fireEvent.input(textarea, { target: { value: '竹' } });
+
+    expect(textarea.value).toEqual('竹');
+    expect(count?.textContent).toEqual('1 / 5');
+  });
+
   describe('cls', () => {
     it('raw', () => {
       const { container } = render(

tests/count.test.tsx

@@ -149,6 +149,28 @@ describe('Input.Count', () => {
     expect(onChange).toHaveBeenCalledTimes(1);
   });
 
+  it('should base showCount on committed value during IME composition', () => {
+    const { container } = render(
+      <Input count={{ show: true, max: 5 }} defaultValue="" />,
+    );
+    const input = container.querySelector('input')!;
+    const count = container.querySelector('.rc-input-show-count-suffix');
+
+    expect(count?.textContent).toEqual('0 / 5');
+
+    fireEvent.compositionStart(input);
+    fireEvent.change(input, { target: { value: 'zhu' } });
+
+    expect(input.value).toEqual('zhu');
+    expect(count?.textContent).toEqual('0 / 5');
+
+    fireEvent.compositionEnd(input, { target: { value: '竹' } });
+    fireEvent.input(input, { target: { value: '竹' } });
+
+    expect(input.value).toEqual('竹');
+    expect(count?.textContent).toEqual('1 / 5');
+  });
+
   it('using the input method to enter the cropped content should trigger onChange twice', () => {
     const onChange = jest.fn();
     const onCompositionEnd = jest.fn();