react-hook-form 7.50.1 → 7.51.1

package/dist/index.esm.mjs

@@ -263,6 +263,7 @@ function useFormState(props) {
         isLoading: false,
         dirtyFields: false,
         touchedFields: false,
+        validatingFields: false,
         isValidating: false,
         isValid: false,
         errors: false,
@@ -490,6 +491,10 @@ function useController(props) {
                 enumerable: true,
                 get: () => !!get(formState.touchedFields, name),
             },
+            isValidating: {
+                enumerable: true,
+                get: () => !!get(formState.validatingFields, name),
+            },
             error: {
                 enumerable: true,
                 get: () => get(formState.errors, name),
@@ -1518,7 +1523,7 @@ const defaultOptions = {
     reValidateMode: VALIDATION_MODE.onChange,
     shouldFocusError: true,
 };
-function createFormControl(props = {}, flushRootRender) {
+function createFormControl(props = {}) {
     let _options = {
         ...defaultOptions,
         ...props,
@@ -1534,12 +1539,13 @@ function createFormControl(props = {}, flushRootRender) {
         isValid: false,
         touchedFields: {},
         dirtyFields: {},
+        validatingFields: {},
         errors: _options.errors || {},
         disabled: _options.disabled || false,
     };
     let _fields = {};
-    let _defaultValues = isObject(_options.values) || isObject(_options.defaultValues)
-        ? cloneObject(_options.values || _options.defaultValues) || {}
+    let _defaultValues = isObject(_options.defaultValues) || isObject(_options.values)
+        ? cloneObject(_options.defaultValues || _options.values) || {}
         : {};
     let _formValues = _options.shouldUnregister
         ? {}
@@ -1560,6 +1566,7 @@ function createFormControl(props = {}, flushRootRender) {
     const _proxyFormState = {
         isDirty: false,
         dirtyFields: false,
+        validatingFields: false,
         touchedFields: false,
         isValidating: false,
         isValid: false,
@@ -1589,10 +1596,16 @@ function createFormControl(props = {}, flushRootRender) {
             }
         }
     };
-    const _updateIsValidating = (value) => _proxyFormState.isValidating &&
-        _subjects.state.next({
-            isValidating: value,
-        });
+    const _updateIsValidating = (names, isValidating) => {
+        if (_proxyFormState.isValidating || _proxyFormState.validatingFields) {
+            (names || Array.from(_names.mount)).forEach((name) => name && set(_formState.validatingFields, name, !!isValidating));
+            _formState.isValidating = Object.values(_formState.validatingFields).some((val) => val);
+            _subjects.state.next({
+                validatingFields: _formState.validatingFields,
+                isValidating: _formState.isValidating,
+            });
+        }
+    };
     const _updateFieldArray = (name, values = [], method, args, shouldSetValues = true, shouldUpdateFieldsAndState = true) => {
         if (args && method) {
             _state.action = true;
@@ -1721,9 +1734,13 @@ function createFormControl(props = {}, flushRootRender) {
             };
             _subjects.state.next(updatedFormState);
         }
-        _updateIsValidating(false);
     };
-    const _executeSchema = async (name) => _options.resolver(_formValues, _options.context, getResolverOptions(name || _names.mount, _fields, _options.criteriaMode, _options.shouldUseNativeValidation));
+    const _executeSchema = async (name) => {
+        _updateIsValidating(name, true);
+        const result = await _options.resolver(_formValues, _options.context, getResolverOptions(name || _names.mount, _fields, _options.criteriaMode, _options.shouldUseNativeValidation));
+        _updateIsValidating(name);
+        return result;
+    };
     const executeSchemaAndUpdateState = async (names) => {
         const { errors } = await _executeSchema(names);
         if (names) {
@@ -1748,7 +1765,9 @@ function createFormControl(props = {}, flushRootRender) {
                 const { _f, ...fieldValue } = field;
                 if (_f) {
                     const isFieldArrayRoot = _names.array.has(_f.name);
+                    _updateIsValidating([name], true);
                     const fieldError = await validateField(field, _formValues, shouldDisplayAllAssociatedErrors, _options.shouldUseNativeValidation && !shouldOnlyCheckValid, isFieldArrayRoot);
+                    _updateIsValidating([name]);
                     if (fieldError[_f.name]) {
                         context.valid = false;
                         if (shouldOnlyCheckValid) {
@@ -1877,10 +1896,9 @@ function createFormControl(props = {}, flushRootRender) {
         }
         isWatched(name, _names) && _subjects.state.next({ ..._formState });
         _subjects.values.next({
-            name,
+            name: _state.mount ? name : undefined,
             values: { ..._formValues },
         });
-        !_state.mount && flushRootRender();
     };
     const onChange = async (event) => {
         const target = event.target;
@@ -1926,7 +1944,6 @@ function createFormControl(props = {}, flushRootRender) {
                     _subjects.state.next({ name, ...(watched ? {} : fieldState) }));
             }
             !isBlurEvent && watched && _subjects.state.next({ ..._formState });
-            _updateIsValidating(true);
             if (_options.resolver) {
                 const { errors } = await _executeSchema([name]);
                 _updateIsFieldValueUpdated(fieldValue);
@@ -1939,7 +1956,9 @@ function createFormControl(props = {}, flushRootRender) {
                 }
             }
             else {
+                _updateIsValidating([name], true);
                 error = (await validateField(field, _formValues, shouldDisplayAllAssociatedErrors, _options.shouldUseNativeValidation))[name];
+                _updateIsValidating([name]);
                 _updateIsFieldValueUpdated(fieldValue);
                 if (isFieldValueUpdated) {
                     if (error) {
@@ -1968,7 +1987,6 @@ function createFormControl(props = {}, flushRootRender) {
         let isValid;
         let validationResult;
         const fieldNames = convertToArrayPayload(name);
-        _updateIsValidating(true);
         if (_options.resolver) {
             const errors = await executeSchemaAndUpdateState(isUndefined(name) ? name : fieldNames);
             isValid = isEmptyObject(errors);
@@ -1993,7 +2011,6 @@ function createFormControl(props = {}, flushRootRender) {
                 : { name }),
             ...(_options.resolver || !name ? { isValid } : {}),
             errors: _formState.errors,
-            isValidating: false,
         });
         options.shouldFocus &&
             !validationResult &&
@@ -2015,6 +2032,7 @@ function createFormControl(props = {}, flushRootRender) {
         invalid: !!get((formState || _formState).errors, name),
         isDirty: !!get((formState || _formState).dirtyFields, name),
         isTouched: !!get((formState || _formState).touchedFields, name),
+        isValidating: !!get((formState || _formState).validatingFields, name),
         error: get((formState || _formState).errors, name),
     });
     const clearErrors = (name) => {
@@ -2053,6 +2071,8 @@ function createFormControl(props = {}, flushRootRender) {
             !options.keepError && unset(_formState.errors, fieldName);
             !options.keepDirty && unset(_formState.dirtyFields, fieldName);
             !options.keepTouched && unset(_formState.touchedFields, fieldName);
+            !options.keepIsValidating &&
+                unset(_formState.validatingFields, fieldName);
             !_options.shouldUnregister &&
                 !options.keepDefaultValue &&
                 unset(_defaultValues, fieldName);
@@ -2252,9 +2272,8 @@ function createFormControl(props = {}, flushRootRender) {
     const _reset = (formValues, keepStateOptions = {}) => {
         const updatedValues = formValues ? cloneObject(formValues) : _defaultValues;
         const cloneUpdatedValues = cloneObject(updatedValues);
-        const values = formValues && !isEmptyObject(formValues)
-            ? cloneUpdatedValues
-            : _defaultValues;
+        const isEmptyResetValues = isEmptyObject(formValues);
+        const values = isEmptyResetValues ? _defaultValues : cloneUpdatedValues;
         if (!keepStateOptions.keepDefaultValues) {
             _defaultValues = updatedValues;
         }
@@ -2299,14 +2318,13 @@ function createFormControl(props = {}, flushRootRender) {
             });
         }
         _names = {
-            mount: new Set(),
+            mount: keepStateOptions.keepDirtyValues ? _names.mount : new Set(),
             unMount: new Set(),
             array: new Set(),
             watch: new Set(),
             watchAll: false,
             focus: '',
         };
-        !_state.mount && flushRootRender();
         _state.mount =
             !_proxyFormState.isValid ||
                 !!keepStateOptions.keepIsValid ||
@@ -2316,20 +2334,24 @@ function createFormControl(props = {}, flushRootRender) {
             submitCount: keepStateOptions.keepSubmitCount
                 ? _formState.submitCount
                 : 0,
-            isDirty: keepStateOptions.keepDirty
-                ? _formState.isDirty
-                : !!(keepStateOptions.keepDefaultValues &&
-                    !deepEqual(formValues, _defaultValues)),
+            isDirty: isEmptyResetValues
+                ? false
+                : keepStateOptions.keepDirty
+                    ? _formState.isDirty
+                    : !!(keepStateOptions.keepDefaultValues &&
+                        !deepEqual(formValues, _defaultValues)),
             isSubmitted: keepStateOptions.keepIsSubmitted
                 ? _formState.isSubmitted
                 : false,
-            dirtyFields: keepStateOptions.keepDirtyValues
-                ? keepStateOptions.keepDefaultValues && _formValues
-                    ? getDirtyFields(_defaultValues, _formValues)
-                    : _formState.dirtyFields
-                : keepStateOptions.keepDefaultValues && formValues
-                    ? getDirtyFields(_defaultValues, formValues)
-                    : {},
+            dirtyFields: isEmptyResetValues
+                ? []
+                : keepStateOptions.keepDirtyValues
+                    ? keepStateOptions.keepDefaultValues && _formValues
+                        ? getDirtyFields(_defaultValues, _formValues)
+                        : _formState.dirtyFields
+                    : keepStateOptions.keepDefaultValues && formValues
+                        ? getDirtyFields(_defaultValues, formValues)
+                        : {},
             touchedFields: keepStateOptions.keepTouched
                 ? _formState.touchedFields
                 : {},
@@ -2487,6 +2509,7 @@ function useForm(props = {}) {
         submitCount: 0,
         dirtyFields: {},
         touchedFields: {},
+        validatingFields: {},
         errors: props.errors || {},
         disabled: props.disabled || false,
         defaultValues: isFunction(props.defaultValues)
@@ -2495,7 +2518,7 @@ function useForm(props = {}) {
     });
     if (!_formControl.current) {
         _formControl.current = {
-            ...createFormControl(props, () => updateFormState((formState) => ({ ...formState }))),
+            ...createFormControl(props),
             formState,
         };
     }