fix: change not trigger on Date (#734)

Author: zombieJ

src/Field.tsx

@@ -620,7 +620,7 @@ class Field extends React.Component<InternalFieldProps, FieldState> implements F
       if (normalize) {
         newValue = normalize(newValue, value, getFieldsValue(true));
       }
-      if (!isEqual(newValue, value)) {
+      if (newValue !== value) {
         dispatch({
           type: 'updateValue',
           namePath,

tests/control.test.tsx

@@ -40,18 +40,4 @@ describe('Form.Control', () => {
     await changeValue(getInput(container), ['bamboo', '']);
     matchError(container, "'test' is required");
   });
-
-  it('value no change', async () => {
-    const fn = jest.fn();
-    const { container } = render(
-      <Form onFieldsChange={fn}>
-        <InfoField name="test" normalize={value => value?.replace(/\D/g, '') || undefined} />
-      </Form>,
-    );
-
-    await changeValue(getInput(container), 'bamboo');
-    expect(fn).toHaveBeenCalledTimes(0);
-    await changeValue(getInput(container), '1');
-    expect(fn).toHaveBeenCalledTimes(1);
-  });
 });

tests/field.test.tsx

@@ -1,7 +1,10 @@
 import React from 'react';
 import Form, { Field } from '../src';
 import type { FormInstance } from '../src';
-import { render } from '@testing-library/react';
+import { act, fireEvent, render } from '@testing-library/react';
+import { Input } from './common/InfoField';
+import { getInput } from './common';
+import timeout from './common/timeout';
 
 describe('Form.Field', () => {
   it('field remount should trigger constructor again', () => {
@@ -37,4 +40,37 @@ describe('Form.Field', () => {
     // expect((wrapper.find('Field').instance() as any).cancelRegisterFunc).toBeTruthy();
     expect(formRef.getFieldsValue()).toEqual({ light: 'bamboo' });
   });
+
+  // https://github.com/ant-design/ant-design/issues/51611
+  it('date type as change', async () => {
+    const onValuesChange = jest.fn();
+
+    const MockDateInput = (props: { onChange?: (val: Date) => void }) => (
+      <button
+        onClick={() => {
+          props.onChange?.(new Date());
+        }}
+      >
+        Mock
+      </button>
+    );
+
+    const { container } = render(
+      <Form onValuesChange={onValuesChange}>
+        <Field name="date">
+          <MockDateInput />
+        </Field>
+      </Form>,
+    );
+
+    // Trigger
+    for (let i = 0; i < 3; i += 1) {
+      fireEvent.click(container.querySelector('button'));
+      await act(async () => {
+        await timeout();
+      });
+      expect(onValuesChange).toHaveBeenCalled();
+      onValuesChange.mockReset();
+    }
+  });
 });

tests/legacy/field-props.test.tsx

@@ -1,7 +1,7 @@
 import React from 'react';
 import type { FormInstance } from '../../src';
 import Form, { Field } from '../../src';
-import { Input } from '../common/InfoField';
+import InfoField, { Input } from '../common/InfoField';
 import { changeValue, getInput, matchArray } from '../common';
 import { render } from '@testing-library/react';
 
@@ -55,22 +55,38 @@ describe('legacy.field-props', () => {
     expect(form.current?.getFieldValue('normal')).toBe('21');
   });
 
-  it('normalize', async () => {
-    const form = React.createRef<FormInstance>();
-    const { container } = render(
-      <div>
-        <Form ref={form}>
-          <Field name="normal" normalize={v => v && v.toUpperCase()}>
-            <Input />
-          </Field>
-        </Form>
-      </div>,
-    );
+  describe('normalize', () => {
+    it('basic', async () => {
+      const form = React.createRef<FormInstance>();
+      const { container } = render(
+        <div>
+          <Form ref={form}>
+            <Field name="normal" normalize={v => v && v.toUpperCase()}>
+              <Input />
+            </Field>
+          </Form>
+        </div>,
+      );
 
-    await changeValue(getInput(container), 'a');
+      await changeValue(getInput(container), 'a');
+
+      expect(form.current?.getFieldValue('normal')).toBe('A');
+      expect(getInput(container).value).toBe('A');
+    });
+
+    it('value no change', async () => {
+      const fn = jest.fn();
+      const { container } = render(
+        <Form onFieldsChange={fn}>
+          <InfoField name="test" normalize={value => value?.replace(/\D/g, '') || undefined} />
+        </Form>,
+      );
 
-    expect(form.current?.getFieldValue('normal')).toBe('A');
-    expect(getInput(container).value).toBe('A');
+      await changeValue(getInput(container), 'bamboo');
+      expect(fn).toHaveBeenCalledTimes(0);
+      await changeValue(getInput(container), '1');
+      expect(fn).toHaveBeenCalledTimes(1);
+    });
   });
 
   it('support jsx message', async () => {