feat: add delayFrame option to validateFields

- Add delayFrame option to InternalValidateOptions interface
- Conditionally call delayFrame when delayFrame option is true in Field.validateRules
- Use delayFrame: true in triggerDependenciesUpdate to avoid useWatch rule timing issues
- Adjust test files (jest.mock formatting cleanup)

Author: zombieJ

src/Field.tsx

@@ -392,7 +392,7 @@ class Field extends React.Component<InternalFieldProps, FieldState> implements F
     const namePath = this.getNamePath();
     const currentValue = this.getValue();
 
-    const { triggerName, validateOnly = false } = options || {};
+    const { triggerName, validateOnly = false, delayFrame: showDelayFrame } = options || {};
 
     // Force change to async to avoid rule OOD under renderProps field
     const rootPromise = Promise.resolve().then(async (): Promise<any[]> => {
@@ -404,7 +404,9 @@ class Field extends React.Component<InternalFieldProps, FieldState> implements F
 
       // Should wait for the frame render,
       // since developer may `useWatch` value in the rules.
-      await delayFrame();
+      if (showDelayFrame) {
+        await delayFrame();
+      }
 
       // Start validate
       let filteredRules = this.getRules();

src/hooks/useForm.ts

@@ -747,7 +747,10 @@ export class FormStore {
   private triggerDependenciesUpdate = (prevStore: Store, namePath: InternalNamePath) => {
     const childrenFields = this.getDependencyChildrenFields(namePath);
     if (childrenFields.length) {
-      this.validateFields(childrenFields);
+      this.validateFields(childrenFields, {
+        // Delay to avoid `useWatch` dynamic adjust rules that deps not get latest one
+        delayFrame: true,
+      });
     }
 
     this.notifyObservers(prevStore, childrenFields, {

src/interface.ts

@@ -157,6 +157,7 @@ export type ValidateFields<Values = any> = {
 export interface InternalValidateOptions extends ValidateOptions {
   triggerName?: string;
   validateMessages?: ValidateMessages;
+  delayFrame?: boolean;
 }
 
 export type InternalValidateFields<Values = any> = {

tests/index.test.tsx

@@ -7,8 +7,8 @@ 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', () => {
   describe('create form', () => {

tests/list.test.tsx

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

tests/validate-warning.test.tsx

@@ -5,8 +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');
 
+jest.mock('../src/utils/delayUtil');
 describe('Form.WarningValidate', () => {
   it('required', async () => {
     const form = React.createRef<FormInstance>();