fix: Rule deps on the useWatch

src/Field.tsx

@@ -28,6 +28,7 @@ import {
   getNamePath,
   getValue,
 } from './utils/valueUtil';
+import delayFrame from './utils/delayUtil';
 
 const EMPTY_ERRORS: any[] = [];
 const EMPTY_WARNINGS: any[] = [];
@@ -99,8 +100,10 @@ export interface InternalFieldProps<Values = any> {
   fieldContext?: InternalFormInstance;
 }
 
-export interface FieldProps<Values = any>
-  extends Omit<InternalFieldProps<Values>, 'name' | 'fieldContext'> {
+export interface FieldProps<Values = any> extends Omit<
+  InternalFieldProps<Values>,
+  'name' | 'fieldContext'
+> {
   name?: NamePath<Values>;
 }
 
@@ -399,6 +402,10 @@ class Field extends React.Component<InternalFieldProps, FieldState> implements F
 
       const { validateFirst = false, messageVariables, validateDebounce } = this.props;
 
+      // Should wait for the frame render,
+      // since developer may `useWatch` value in the rules.
+      await delayFrame();
+
       // Start validate
       let filteredRules = this.getRules();
       if (triggerName) {

src/hooks/useNotifyWatch.ts

@@ -4,8 +4,9 @@ import type { FormStore } from './useForm';
 
 /**
  * Call action with delay in macro task.
+ * export for test usage.
  */
-const macroTask = (fn: VoidFunction) => {
+export const macroTask = (fn: VoidFunction) => {
   const channel = new MessageChannel();
   channel.port1.onmessage = fn;
   channel.port2.postMessage(null);

src/utils/delayUtil.ts

@@ -0,0 +1,9 @@
+import raf from '@rc-component/util/lib/raf';
+
+export default async function delayFrame() {
+  return new Promise<void>(resolve => {
+    raf(() => {
+      resolve();
+    });
+  });
+}

tests/__mocks__/src/utils/delayUtil.ts

@@ -0,0 +1,4 @@
+export default async function delayFrame() {
+  return Promise.resolve();
+  return Promise.resolve();
+}

tests/common/timeout.ts

@@ -1,3 +1,4 @@
+import { macroTask } from '../../src/hooks/useNotifyWatch';
 import { act } from '@testing-library/react';
 
 export default async (timeout: number = 10) => {
@@ -7,6 +8,13 @@ export default async (timeout: number = 10) => {
 };
 
 export async function waitFakeTime(timeout: number = 10) {
+  await act(async () => {
+    await new Promise<void>(resolve => {
+      macroTask(resolve);
+      jest.advanceTimersByTime(11);
+    });
+  });
+
   await act(async () => {
     await Promise.resolve();
     jest.advanceTimersByTime(timeout);

tests/context.test.tsx

@@ -6,6 +6,8 @@ import InfoField from './common/InfoField';
 import { changeValue, matchError, getInput } from './common';
 import timeout from './common/timeout';
 
+jest.mock('../src/utils/delayUtil');
+
 describe('Form.Context', () => {
   it('validateMessages', async () => {
     const { container } = render(

tests/dependencies.test.tsx

@@ -1,12 +1,16 @@
 import React from 'react';
 import type { FormInstance } from '../src';
 import Form, { Field } from '../src';
-import timeout, { waitFakeTime } from './common/timeout';
+import { waitFakeTime } from './common/timeout';
 import InfoField, { Input } from './common/InfoField';
 import { changeValue, matchError, getInput } from './common';
 import { fireEvent, render } from '@testing-library/react';
 
 describe('Form.Dependencies', () => {
+  afterEach(() => {
+    jest.useRealTimers();
+  });
+
   it('touched', async () => {
     const form = React.createRef<FormInstance>();
 
@@ -32,6 +36,8 @@ describe('Form.Dependencies', () => {
   describe('initialValue', () => {
     function test(name: string, formProps = {}, fieldProps = {}) {
       it(name, async () => {
+        jest.useFakeTimers();
+
         let validated = false;
 
         const { container } = render(
@@ -56,6 +62,7 @@ describe('Form.Dependencies', () => {
 
         // Not trigger if not touched
         await changeValue(getInput(container, 0), 'bamboo');
+        await waitFakeTime();
         expect(validated).toBeTruthy();
       });
     }
@@ -253,7 +260,7 @@ describe('Form.Dependencies', () => {
 
         <Field shouldUpdate={() => false}>
           {() => {
-            console.log('render!');
+
             counter += 1;
             return null;
           }}
@@ -268,4 +275,30 @@ describe('Form.Dependencies', () => {
     expect(container.querySelectorAll('input')).toHaveLength(1);
     expect(counter).toEqual(1);
   });
+
+  it('error should be cleared when dependency field changes and rule becomes false', async () => {
+    const Demo = () => {
+      const [form] = Form.useForm();
+      const type = Form.useWatch('type', form);
+
+      return (
+        <Form form={form}>
+          <InfoField name="type">
+            <Input />
+          </InfoField>
+          <InfoField name="name" rules={[{ required: type !== '1' }]} dependencies={['type']}>
+            <Input />
+          </InfoField>
+        </Form>
+      );
+    };
+
+    const { container } = render(<Demo />);
+    await changeValue(getInput(container, 1), ['bamboo', '']);
+    matchError(container, true);
+
+    // Change type to make rule true
+    await changeValue(getInput(container), '1');
+    matchError(container, false);
+  });
 });

tests/index.test.tsx

@@ -6,6 +6,8 @@ import Form, { Field, useForm } from '../src';
 import { changeValue, getInput, matchError } from './common';
 import InfoField, { Input } from './common/InfoField';
 import timeout, { waitFakeTime } from './common/timeout';
+
+jest.mock('../src/utils/delayUtil');
 import type { FormRef, Meta } from '@/interface';
 
 describe('Form.Basic', () => {

tests/initialValue.test.tsx

@@ -165,11 +165,11 @@ describe('Form.InitialValues', () => {
 
     fireEvent.click(container.querySelector('button'));
     expect(formValue.users[0].last).toEqual('bbb');
-    console.log('Form Value:', refForm.getFieldsValue(true));
+
 
     fireEvent.click(container.querySelector('button'));
     expect(formValue.users[0].last).toEqual('bbb');
-    console.log('Form Value:', refForm.getFieldsValue(true));
+
 
     fireEvent.click(container.querySelector('button'));
 

tests/list.test.tsx

@@ -10,6 +10,8 @@ import InfoField, { Input } from './common/InfoField';
 import { changeValue, getInput } from './common';
 import timeout from './common/timeout';
 
+jest.mock('../src/utils/delayUtil');
+
 describe('Form.List', () => {
   const form = React.createRef<FormInstance>();
 

tests/useWatch.test.tsx

@@ -471,6 +471,8 @@ describe('useWatch', () => {
       React.useEffect(() => {
         console.log(nameValuePreserve, nameValue);
       }, [nameValuePreserve, nameValue]);
+
+
       return (
         <div>
           <Form form={form} initialValues={{ name: 'bamboo' }} />

tests/validate-warning.test.tsx

@@ -5,6 +5,8 @@ import { changeValue, getInput, matchError } from './common';
 import type { FormInstance, Rule } from '../src/interface';
 import { render } from '@testing-library/react';
 
+jest.mock('../src/utils/delayUtil');
+
 describe('Form.WarningValidate', () => {
   it('required', async () => {
     const form = React.createRef<FormInstance>();

tests/validate.test.tsx

@@ -6,6 +6,8 @@ import { changeValue, getInput, matchError } from './common';
 import InfoField, { Input } from './common/InfoField';
 import timeout, { waitFakeTime } from './common/timeout';
 
+jest.mock('../src/utils/delayUtil');
+
 describe('Form.Validate', () => {
   it('required', async () => {
     const form = React.createRef<FormInstance>();