react-hook-form 7.88.0 → 7.89.0

package/dist/index.esm.mjs

@@ -97,6 +97,16 @@ const INPUT_VALIDATION_RULES = {
     required: 'required',
     validate: 'validate',
 };
+const REGISTER_VALIDATION_RULES = [
+    INPUT_VALIDATION_RULES.required,
+    INPUT_VALIDATION_RULES.min,
+    INPUT_VALIDATION_RULES.max,
+    INPUT_VALIDATION_RULES.minLength,
+    INPUT_VALIDATION_RULES.maxLength,
+    INPUT_VALIDATION_RULES.pattern,
+    INPUT_VALIDATION_RULES.validate,
+];
+const FORM_ERROR_TYPE = 'form';
 const ROOT_ERROR_TYPE = 'root';
 const PROTOTYPE_KEYWORDS = ['__proto__', 'constructor', 'prototype'];
 
@@ -541,6 +551,7 @@ function useController(props) {
         const field = get(control._fields, name);
         if (field && field._f && elm) {
             field._f.ref = _proxyRef.current;
+            field._f._c = true;
         }
     }, [control._fields, name]);
     const field = React.useMemo(() => ({
@@ -565,6 +576,7 @@ function useController(props) {
             const field = get(control._fields, name);
             if (field && field._f) {
                 field._f.mount = value;
+                field._f._c = value;
             }
         };
         updateMounted(name, true);
@@ -577,7 +589,13 @@ function useController(props) {
                 set(control._formValues, name, value);
             }
         }
-        !isArrayField && control.register(name);
+        !isArrayField &&
+            control.register(name, {
+                ..._props.current.rules,
+                ...(isBoolean(_props.current.disabled)
+                    ? { disabled: _props.current.disabled }
+                    : {}),
+            });
         if (_proxyRef.current) {
             const field = get(control._fields, name);
             if (field && field._f) {
@@ -807,7 +825,7 @@ var getValueAndMessage = (validationData) => isObject(validationData) && !isRege
     };
 
 var validateField = async (field, disabledFieldNames, formValues, validateAllFieldCriteria, shouldUseNativeValidation, isFieldArray) => {
-    const { ref, refs, required, maxLength, minLength, min, max, pattern, validate, name, valueAsNumber, mount, } = field._f;
+    const { ref, refs, required, maxLength, minLength, min, max, pattern, validate, name, valueAsNumber, mount, _c, } = field._f;
     const inputValue = get(formValues, name);
     if (!mount || disabledFieldNames.has(name)) {
         return {};
@@ -817,7 +835,8 @@ var validateField = async (field, disabledFieldNames, formValues, validateAllFie
         if (shouldUseNativeValidation && inputRef.reportValidity) {
             const validityMessage = isBoolean(message) ? '' : message || '';
             if (refs) {
-                refs.forEach((ref) => ref.setCustomValidity(validityMessage));
+                refs.forEach((ref) => isFunction(ref.setCustomValidity) &&
+                    ref.setCustomValidity(validityMessage));
             }
             else {
                 inputRef.setCustomValidity(validityMessage);
@@ -832,7 +851,7 @@ var validateField = async (field, disabledFieldNames, formValues, validateAllFie
     const isEmpty = ((valueAsNumber || isFileInput(ref)) &&
         isUndefined(ref.value) &&
         isUndefined(inputValue)) ||
-        (isHTMLElement(ref) && ref.value === '') ||
+        (isHTMLElement(ref) && ref.value === '' && !_c) ||
         inputValue === '' ||
         (Array.isArray(inputValue) && !inputValue.length);
     const appendErrorsCurry = appendErrors.bind(null, name, validateAllFieldCriteria, error);
@@ -1334,10 +1353,23 @@ function useFieldArray(props) {
             else {
                 const field = get(control._fields, name);
                 if (field && field._f) {
-                    validateField(field, control._names.disabled, control._formValues, control._options.criteriaMode === VALIDATION_MODE.all, control._options.shouldUseNativeValidation, true).then((error) => !isEmptyObject(error) &&
-                        control._subjects.state.next({
-                            errors: updateFieldArrayRootError(control._formState.errors, error, name),
-                        }));
+                    validateField(field, control._names.disabled, control._formValues, control._options.criteriaMode === VALIDATION_MODE.all, control._options.shouldUseNativeValidation, true).then((error) => {
+                        if (!isEmptyObject(error)) {
+                            control._subjects.state.next({
+                                errors: updateFieldArrayRootError(control._formState.errors, error, name),
+                            });
+                        }
+                        else {
+                            const existingError = get(control._formState.errors, name);
+                            if (existingError && existingError[ROOT_ERROR_TYPE]) {
+                                unset(control._formState.errors, `${name}.${ROOT_ERROR_TYPE}`);
+                                control._subjects.state.next({
+                                    errors: control._formState
+                                        .errors,
+                                });
+                            }
+                        }
+                    });
                 }
             }
         }
@@ -1365,7 +1397,8 @@ function useFieldArray(props) {
     }, [fields, name, control, disabled]);
     React.useEffect(() => {
         if (!disabled) {
-            !get(control._formValues, name) && control._setFieldArray(name);
+            isUndefined(get(control._formValues, name)) &&
+                control._setFieldArray(name);
         }
         return () => {
             control._state.actionArrayLengths.delete(name);
@@ -1718,16 +1751,15 @@ var createSubject = () => {
 };
 
 function extractFormValues(fieldsState, formValues) {
-    const values = {};
+    const values = (Array.isArray(fieldsState) ? [] : {});
     for (const key in fieldsState) {
         if (fieldsState.hasOwnProperty(key)) {
             const fieldState = fieldsState[key];
             const fieldValue = formValues[key];
-            if (fieldState && isObject(fieldState) && fieldValue) {
-                const nestedFieldsState = extractFormValues(fieldState, fieldValue);
-                if (isObject(nestedFieldsState)) {
-                    values[key] = nestedFieldsState;
-                }
+            if (fieldState &&
+                (isObject(fieldState) || Array.isArray(fieldState)) &&
+                fieldValue) {
+                values[key] = extractFormValues(fieldState, fieldValue);
             }
             else if (fieldsState[key]) {
                 values[key] = fieldValue;
@@ -2030,7 +2062,6 @@ const defaultOptions = {
     reValidateMode: VALIDATION_MODE.onChange,
     shouldFocusError: true,
 };
-const FORM_ERROR_TYPE = 'form';
 const updateDirtyFields = (dirtyFields, nextDirtyFields) => {
     for (const key in dirtyFields) {
         if (!(key in nextDirtyFields)) {
@@ -2194,12 +2225,16 @@ function createFormControl(props = {}) {
                 unsetEmptyArray(_formState.errors, name);
             }
             const touchedFieldsArray = get(_formState.touchedFields, name);
-            if (_isTracked('touchedFields') &&
-                shouldUpdateFieldsAndState &&
-                Array.isArray(touchedFieldsArray)) {
+            const shouldUpdateTouchedFields = shouldUpdateFieldsAndState && Array.isArray(touchedFieldsArray);
+            if (shouldUpdateTouchedFields) {
                 const touchedFields = method(touchedFieldsArray, args.argA, args.argB);
                 shouldSetValues && set(_formState.touchedFields, name, touchedFields);
             }
+            const dirtyFieldsArray = get(_formState.dirtyFields, name);
+            if (shouldUpdateFieldsAndState && Array.isArray(dirtyFieldsArray)) {
+                const dirtyFields = method(dirtyFieldsArray, args.argA, args.argB) || dirtyFieldsArray;
+                shouldSetValues && set(_formState.dirtyFields, name, dirtyFields);
+            }
             if (_isTracked('dirtyFields')) {
                 _updateDirtyFields();
             }
@@ -2207,6 +2242,9 @@ function createFormControl(props = {}) {
                 name,
                 isDirty: _getDirty(name, values),
                 dirtyFields: _formState.dirtyFields,
+                ...(shouldUpdateTouchedFields && {
+                    touchedFields: _formState.touchedFields,
+                }),
                 errors: _formState.errors,
                 isValid: _formState.isValid,
             });
@@ -2224,11 +2262,13 @@ function createFormControl(props = {}) {
     };
     const _setErrors = (errors) => {
         Object.keys(delayErrorCallbacks).forEach(cancelDelayedError);
+        const hasErrors = !isEmptyObject(errors);
         _formState.errors = errors;
         _subjects.state.next({
             errors: _formState.errors,
-            isValid: false,
+            ...(hasErrors ? { isValid: false } : {}),
         });
+        !hasErrors && _state.mount && _setValid();
     };
     const hasExplicitNullIntermediate = (name) => {
         const segments = isKey(name) ? [name] : stringToPath(name);
@@ -2296,7 +2336,13 @@ function createFormControl(props = {}) {
                 ? set(_formValues, name, shouldSkipSetValueAs ? defaultValue : getFieldValue(field._f))
                 : setFieldValue(name, defaultValue);
             if (_state.mount && !_state.action) {
-                _setValid();
+                if (_options.resolver &&
+                    _isTracked('isValidating', 'validatingFields')) {
+                    Promise.resolve().then(() => _setValid());
+                }
+                else {
+                    _setValid();
+                }
                 if (wasUnsetInFormValues &&
                     _formState.isDirty &&
                     _isTracked('isDirty')) {
@@ -2404,7 +2450,7 @@ function createFormControl(props = {}) {
         if (names) {
             for (const name of names) {
                 const error = get(errors, name);
-                cancelDelayedError(name);
+                cancelDelayedErrorTree(name);
                 const isFieldArrayRootError = _names.array.has(name) &&
                     isObject(error) &&
                     !Object.keys(error).some((key) => !Number.isNaN(Number(key)));
@@ -2428,34 +2474,43 @@ function createFormControl(props = {}) {
         return errors;
     };
     const validateForm = async ({ name, eventType, }) => {
-        if (props.validate) {
-            const result = await props.validate({
+        if (_options.validate) {
+            const resetCallId = _resetCallId;
+            const result = await _options.validate({
                 formValues: _formValues,
                 formState: _formState,
                 name,
                 eventType,
             });
+            if (resetCallId !== _resetCallId) {
+                return true;
+            }
             if (isObject(result)) {
+                let isValid = true;
+                clearErrors(FORM_ERROR_TYPE);
                 for (const key in result) {
                     const error = result[key];
                     if (error) {
+                        isValid = false;
                         setError(`${FORM_ERROR_TYPE}.${key}`, {
                             message: isString(error.message) ? error.message : '',
                             type: error.type || INPUT_VALIDATION_RULES.validate,
                         });
                     }
                 }
+                return isValid;
             }
             else if (isString(result) || !result) {
                 setError(FORM_ERROR_TYPE, {
                     message: result || '',
                     type: INPUT_VALIDATION_RULES.validate,
                 });
+                return false;
             }
             else {
                 clearErrors(FORM_ERROR_TYPE);
+                return true;
             }
-            return result;
         }
         return true;
     };
@@ -2463,7 +2518,8 @@ function createFormControl(props = {}) {
         valid: true,
         runRootValidation: false,
     }, }) => {
-        if (props.validate) {
+        const resetCallId = _resetCallId;
+        if (_options.validate && !context.runRootValidation) {
             context.runRootValidation = true;
             const result = await validateForm({
                 name,
@@ -2488,6 +2544,9 @@ function createFormControl(props = {}) {
                         _updateIsValidating([_f.name], true);
                     }
                     const fieldError = await validateField(field, _names.disabled, _formValues, shouldDisplayAllAssociatedErrors, _options.shouldUseNativeValidation && !onlyCheckValid, isFieldArrayRoot);
+                    if (resetCallId !== _resetCallId) {
+                        return context.valid;
+                    }
                     if (isPromiseFunction && shouldTrackIsValidatingState) {
                         _updateIsValidating([_f.name]);
                     }
@@ -2602,6 +2661,13 @@ function createFormControl(props = {}) {
             trigger(name, {
                 delayError: options.delayError,
             });
+        if (options.shouldValidate &&
+            field &&
+            field._f &&
+            field._f.deps &&
+            (!Array.isArray(field._f.deps) || field._f.deps.length > 0)) {
+            trigger(field._f.deps);
+        }
     };
     const setFieldValues = (name, value, options, skipClone = false, skipRender = false, skipValueRender = false) => {
         if (_names.array.has(name)) {
@@ -2649,6 +2715,10 @@ function createFormControl(props = {}) {
                     });
                 }
             }
+            options.shouldValidate &&
+                trigger(name, {
+                    delayError: options.delayError,
+                });
         }
         else {
             const isEmpty = (Array.isArray(cloneValue) && !cloneValue.length) ||
@@ -2722,7 +2792,7 @@ function createFormControl(props = {}) {
                 : getEventValue(event);
             const isBlurEvent = event.type === EVENTS.BLUR || event.type === EVENTS.FOCUS_OUT;
             const hasNoValidationEffect = !hasValidation(field._f) &&
-                !props.validate &&
+                !_options.validate &&
                 !_options.resolver &&
                 !get(_formState.errors, name) &&
                 !field._f.deps;
@@ -2765,7 +2835,7 @@ function createFormControl(props = {}) {
                 return (shouldRender &&
                     _subjects.state.next({ name, ...(watched ? {} : fieldState) }));
             }
-            if (!_options.resolver && props.validate) {
+            if (!_options.resolver && _options.validate) {
                 await validateForm({
                     name: name,
                     eventType: event.type,
@@ -2773,7 +2843,11 @@ function createFormControl(props = {}) {
             }
             !isBlurEvent && watched && _subjects.state.next({ ..._formState });
             if (_options.resolver) {
+                const resetCallId = _resetCallId;
                 const { errors } = await _runSchema([name]);
+                if (resetCallId !== _resetCallId) {
+                    return;
+                }
                 _updateIsValidating([name]);
                 _updateIsFieldValueUpdated(fieldValue);
                 if (!isFieldValueUpdated) {
@@ -2787,8 +2861,12 @@ function createFormControl(props = {}) {
                 isValid = isEmptyObject(errors);
             }
             else {
+                const resetCallId = _resetCallId;
                 _updateIsValidating([name], true);
                 error = (await validateField(field, _names.disabled, _formValues, shouldDisplayAllAssociatedErrors, _options.shouldUseNativeValidation))[name];
+                if (resetCallId !== _resetCallId) {
+                    return;
+                }
                 _updateIsValidating([name]);
                 _updateIsFieldValueUpdated(fieldValue);
                 if (isFieldValueUpdated) {
@@ -2802,6 +2880,9 @@ function createFormControl(props = {}) {
                             name: name,
                             eventType: event.type,
                         });
+                        if (resetCallId !== _resetCallId) {
+                            return;
+                        }
                     }
                 }
             }
@@ -2935,7 +3016,7 @@ function createFormControl(props = {}) {
         }
     };
     const setError = (name, error, options) => {
-        cancelDelayedError(name);
+        cancelDelayedErrorTree(name);
         const ref = (get(_fields, name, { _f: {} })._f || {}).ref;
         const currentError = get(_formState.errors, name) || {};
         const { ref: currentRef, message, type, types, ...restOfErrorTree } = currentError;
@@ -3078,6 +3159,14 @@ function createFormControl(props = {}) {
             },
         });
         _names.mount.add(name);
+        if (field && field._f) {
+            const nextField = get(_fields, name);
+            for (const rule of REGISTER_VALIDATION_RULES) {
+                if (!(rule in options)) {
+                    delete nextField._f[rule];
+                }
+            }
+        }
         if (field && !shouldRevalidateRemount) {
             _setDisabledField({
                 disabled: isBoolean(options.disabled)
@@ -3199,10 +3288,14 @@ function createFormControl(props = {}) {
             fieldValues = cloneObject(values);
         }
         else {
+            const resetCallId = _resetCallId;
             await executeBuiltInValidation({
                 fields: _fields,
                 eventType: EVENTS.SUBMIT,
             });
+            if (resetCallId !== _resetCallId) {
+                return;
+            }
             unset(_formState.errors, ROOT_ERROR_TYPE);
         }
         if (_names.disabled.size) {
@@ -3260,7 +3353,7 @@ function createFormControl(props = {}) {
                     : _getDirty();
             }
             if (!options.keepError) {
-                cancelDelayedError(name);
+                cancelDelayedErrorTree(name);
                 unset(_formState.errors, name);
                 _setValid();
             }
@@ -3572,6 +3665,7 @@ function useForm(props = {}) {
     const _formControl = React.useRef(undefined);
     const _values = React.useRef(undefined);
     const _formControlProp = React.useRef(props.formControl);
+    const _hadValidate = React.useRef(!!props.validate);
     const [formState, updateFormState] = React.useState(() => ({
         ...cloneObject(DEFAULT_FORM_STATE),
         isLoading: isFunction(props.defaultValues),
@@ -3602,7 +3696,7 @@ function useForm(props = {}) {
         }
     }
     const control = _formControl.current.control;
-    control._options = props;
+    control._options = { ...props, validate: props.validate };
     const getCurrentFormState = () => ({
         ...control._formState,
         defaultValues: control._defaultValues,
@@ -3643,6 +3737,13 @@ function useForm(props = {}) {
             control._focusError();
         }
     }, [control, props.errors]);
+    React.useEffect(() => {
+        var _a;
+        if (_hadValidate.current && !props.validate) {
+            (_a = _formControl.current) === null || _a === void 0 ? void 0 : _a.clearErrors(FORM_ERROR_TYPE);
+        }
+        _hadValidate.current = !!props.validate;
+    }, [props.validate]);
     React.useEffect(() => {
         props.shouldUnregister &&
             control._subjects.state.next({