react-hook-form 7.50.1 → 7.51.0

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),
@@ -1349,6 +1354,8 @@ var isRadioOrCheckbox = (ref) => isRadioInput(ref) || isCheckBoxInput(ref);
 
 var live = (ref) => isHTMLElement(ref) && ref.isConnected;
 
+var objectHasTruthyValue = (value) => isObject(value) && Object.values(value).some((val) => val);
+
 var objectHasFunction = (data) => {
     for (const key in data) {
         if (isFunction(data[key])) {
@@ -1518,7 +1525,7 @@ const defaultOptions = {
     reValidateMode: VALIDATION_MODE.onChange,
     shouldFocusError: true,
 };
-function createFormControl(props = {}, flushRootRender) {
+function createFormControl(props = {}) {
     let _options = {
         ...defaultOptions,
         ...props,
@@ -1534,12 +1541,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 +1568,7 @@ function createFormControl(props = {}, flushRootRender) {
     const _proxyFormState = {
         isDirty: false,
         dirtyFields: false,
+        validatingFields: false,
         touchedFields: false,
         isValidating: false,
         isValid: false,
@@ -1589,10 +1598,19 @@ function createFormControl(props = {}, flushRootRender) {
             }
         }
     };
-    const _updateIsValidating = (value) => _proxyFormState.isValidating &&
+    const _updateIsValidating = (isValidating, names) => {
+        if (!(_proxyFormState.isValidating || _proxyFormState.validatingFields)) {
+            return;
+        }
+        names.forEach((name) => {
+            set(_formState.validatingFields, name, isValidating);
+        });
+        _formState.isValidating = objectHasTruthyValue(_formState.validatingFields);
         _subjects.state.next({
-            isValidating: value,
+            validatingFields: _formState.validatingFields,
+            isValidating: _formState.isValidating,
         });
+    };
     const _updateFieldArray = (name, values = [], method, args, shouldSetValues = true, shouldUpdateFieldsAndState = true) => {
         if (args && method) {
             _state.action = true;
@@ -1721,7 +1739,7 @@ function createFormControl(props = {}, flushRootRender) {
             };
             _subjects.state.next(updatedFormState);
         }
-        _updateIsValidating(false);
+        _updateIsValidating(false, Object.keys(_formState.validatingFields).filter((key) => key === name));
     };
     const _executeSchema = async (name) => _options.resolver(_formValues, _options.context, getResolverOptions(name || _names.mount, _fields, _options.criteriaMode, _options.shouldUseNativeValidation));
     const executeSchemaAndUpdateState = async (names) => {
@@ -1877,10 +1895,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 +1943,7 @@ function createFormControl(props = {}, flushRootRender) {
                     _subjects.state.next({ name, ...(watched ? {} : fieldState) }));
             }
             !isBlurEvent && watched && _subjects.state.next({ ..._formState });
-            _updateIsValidating(true);
+            _updateIsValidating(true, [name]);
             if (_options.resolver) {
                 const { errors } = await _executeSchema([name]);
                 _updateIsFieldValueUpdated(fieldValue);
@@ -1968,7 +1985,7 @@ function createFormControl(props = {}, flushRootRender) {
         let isValid;
         let validationResult;
         const fieldNames = convertToArrayPayload(name);
-        _updateIsValidating(true);
+        _updateIsValidating(true, fieldNames);
         if (_options.resolver) {
             const errors = await executeSchemaAndUpdateState(isUndefined(name) ? name : fieldNames);
             isValid = isEmptyObject(errors);
@@ -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,
         };
     }