fix: trigger onChange twice when inputting using the input method

react-component · Dec 27, 2023 · 5c2d528 · 5c2d528
1 parent 9640649
commit 5c2d528
Show file tree

Hide file tree

Showing 2 changed files with 45 additions and 1 deletion.
diff --git a/src/Input.tsx b/src/Input.tsx
@@ -97,6 +97,7 @@ const Input = forwardRef<InputRef, InputProps>((props, ref) => {
       | React.ChangeEvent<HTMLInputElement>
       | React.CompositionEvent<HTMLInputElement>,
     currentValue: string,
+    fromCompositionEnd?: boolean,
   ) => {
     let cutValue = currentValue;
 
@@ -116,6 +117,10 @@ const Input = forwardRef<InputRef, InputProps>((props, ref) => {
           inputRef.current?.selectionEnd || 0,
         ]);
       }
+    } else if (fromCompositionEnd) {
+      // Avoid triggering twice
+      // https://github.com/ant-design/ant-design/issues/46587
+      return;
     }
     setValue(cutValue);
 
@@ -138,7 +143,7 @@ const Input = forwardRef<InputRef, InputProps>((props, ref) => {
     e: React.CompositionEvent<HTMLInputElement>,
   ) => {
     compositionRef.current = false;
-    triggerChange(e, e.currentTarget.value);
+    triggerChange(e, e.currentTarget.value, true);
     onCompositionEnd?.(e);
   };
 

diff --git a/tests/count.test.tsx b/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(