react-hook-form 7.11.1 → 7.12.1

package/dist/index.esm.js

@@ -148,11 +148,18 @@ function useController({ name, rules, defaultValue, control, shouldUnregister, }
         control: control || methods.control,
         name,
     });
+    function updateIsMounted(name, value) {
+        const field = get(fieldsRef.current, name);
+        if (field && field._f) {
+            field._f.mount = value;
+        }
+    }
     React.useEffect(() => {
         const controllerSubscription = subjectsRef.current.control.subscribe({
             next: (data) => (!data.name || name === data.name) &&
                 setInputStateValue(get(data.values, name)),
         });
+        updateIsMounted(name, true);
         return () => {
             controllerSubscription.unsubscribe();
             const shouldUnmountField = shouldUnmount || shouldUnregister;
@@ -162,10 +169,7 @@ function useController({ name, rules, defaultValue, control, shouldUnregister, }
                 unregister(name);
             }
             else {
-                const field = get(fieldsRef.current, name);
-                if (field && field._f) {
-                    field._f.mount = false;
-                }
+                updateIsMounted(name, false);
             }
         };
     }, [name]);
@@ -370,7 +374,7 @@ function setDirtyFields(values, defaultValues, dirtyFields, parentNode, parentNa
 var setFieldArrayDirtyFields = (values, defaultValues, dirtyFields) => deepMerge(setDirtyFields(values, defaultValues, dirtyFields.slice(0, values.length)), setDirtyFields(defaultValues, values, dirtyFields.slice(0, values.length)));
 
 function append(data, value) {
-    return [...data, ...convertToArrayPayload(value)];
+    return [...convertToArrayPayload(data), ...convertToArrayPayload(value)];
 }
 
 var fillEmptyArray = (value) => Array.isArray(value) ? Array(value.length).fill(undefined) : undefined;
@@ -395,7 +399,7 @@ var moveArrayAt = (data, from, to) => {
 };
 
 function prepend(data, value) {
-    return [...convertToArrayPayload(value), ...data];
+    return [...convertToArrayPayload(value), ...convertToArrayPayload(data)];
 }
 
 function removeAtIndexes(data, indexes) {
@@ -503,6 +507,8 @@ const useFieldArray = ({ control, name, keyName = 'id', shouldUnregister, }) =>
             cleanup(formStateRef.current.dirtyFields);
         }
         subjectsRef.current.state.next({
+            dirtyFields: formStateRef.current
+                .dirtyFields,
             isDirty: getIsDirty(name, omitKey(updatedFieldArrayValues)),
             errors: formStateRef.current.errors,
             isValid: formStateRef.current.isValid,
@@ -938,6 +944,14 @@ var validateField = async ({ _f: { ref, refs, required, maxLength, minLength, mi
     return error;
 };
 
+var debounce = (callback, wait) => {
+    let timer = 0;
+    return (...args) => {
+        clearTimeout(timer);
+        timer = setTimeout(() => callback(...args), wait);
+    };
+};
+
 var getValidationModes = (mode) => ({
     isOnSubmit: !mode || mode === VALIDATION_MODE.onSubmit,
     isOnBlur: mode === VALIDATION_MODE.onBlur,
@@ -997,7 +1011,7 @@ class Subject {
 }
 
 const isWindowUndefined = typeof window === 'undefined';
-function useForm({ mode = VALIDATION_MODE.onSubmit, reValidateMode = VALIDATION_MODE.onChange, resolver, context, defaultValues = {}, shouldFocusError = true, shouldUseNativeValidation, shouldUnregister, criteriaMode, } = {}) {
+function useForm({ mode = VALIDATION_MODE.onSubmit, reValidateMode = VALIDATION_MODE.onChange, resolver, context, defaultValues = {}, shouldFocusError = true, delayError, shouldUseNativeValidation, shouldUnregister, criteriaMode, } = {}) {
     const [formState, updateFormState] = React.useState({
         isDirty: false,
         isValidating: false,
@@ -1026,6 +1040,7 @@ function useForm({ mode = VALIDATION_MODE.onSubmit, reValidateMode = VALIDATION_
     const contextRef = React.useRef(context);
     const inFieldArrayActionRef = React.useRef(false);
     const isMountedRef = React.useRef(false);
+    const _delayCallback = React.useRef();
     const subjectsRef = React.useRef({
         watch: new Subject(),
         control: new Subject(),
@@ -1046,22 +1061,35 @@ function useForm({ mode = VALIDATION_MODE.onSubmit, reValidateMode = VALIDATION_
     const isFieldWatched = (name) => namesRef.current.watchAll ||
         namesRef.current.watch.has(name) ||
         namesRef.current.watch.has((name.match(/\w+/) || [])[0]);
-    const shouldRenderBaseOnError = React.useCallback(async (shouldSkipRender, name, error, inputState, isValidFromResolver, isWatched) => {
+    const updateErrorState = (name, error) => {
+        set(formStateRef.current.errors, name, error);
+        subjectsRef.current.state.next({
+            errors: formStateRef.current.errors,
+        });
+    };
+    const shouldRenderBaseOnError = React.useCallback(async (shouldSkipRender, name, error, fieldState, isValidFromResolver, isWatched) => {
         const previousError = get(formStateRef.current.errors, name);
         const isValid = readFormStateRef.current.isValid
             ? resolver
                 ? isValidFromResolver
                 : await validateForm(fieldsRef.current, true)
             : false;
-        error
-            ? set(formStateRef.current.errors, name, error)
-            : unset(formStateRef.current.errors, name);
+        if (delayError && error) {
+            _delayCallback.current =
+                _delayCallback.current || debounce(updateErrorState, delayError);
+            _delayCallback.current(name, error);
+        }
+        else {
+            error
+                ? set(formStateRef.current.errors, name, error)
+                : unset(formStateRef.current.errors, name);
+        }
         if ((isWatched ||
             (error ? !deepEqual(previousError, error, true) : previousError) ||
-            !isEmptyObject(inputState) ||
+            !isEmptyObject(fieldState) ||
             formStateRef.current.isValid !== isValid) &&
             !shouldSkipRender) {
-            const updatedFormState = Object.assign(Object.assign({}, inputState), { isValid: !!isValid, errors: formStateRef.current.errors, name });
+            const updatedFormState = Object.assign(Object.assign({}, fieldState), { isValid: !!isValid, errors: formStateRef.current.errors, name });
             formStateRef.current = Object.assign(Object.assign({}, formStateRef.current), updatedFormState);
             subjectsRef.current.state.next(isWatched ? { name } : updatedFormState);
         }
@@ -1237,7 +1265,7 @@ function useForm({ mode = VALIDATION_MODE.onSubmit, reValidateMode = VALIDATION_
         readFormStateRef.current.isValid && updateIsValid();
         return isValid;
     }, [executeResolverValidation, executeInlineValidation]);
-    const updateIsValidAndInputValue = (name, ref) => {
+    const updateIsValidAndInputValue = (name, ref, shouldSkipValueAs) => {
         const field = get(fieldsRef.current, name);
         if (field) {
             const isValueUndefined = isUndefined(field._f.value);
@@ -1250,6 +1278,9 @@ function useForm({ mode = VALIDATION_MODE.onSubmit, reValidateMode = VALIDATION_
                 if (ref && ref.defaultChecked) {
                     field._f.value = getFieldValue(field);
                 }
+                else if (shouldSkipValueAs) {
+                    field._f.value = defaultValue;
+                }
                 else {
                     setFieldValue(name, defaultValue);
                 }
@@ -1264,10 +1295,12 @@ function useForm({ mode = VALIDATION_MODE.onSubmit, reValidateMode = VALIDATION_
         const isValid = resolver
             ? isEmptyObject((await resolverRef.current(Object.assign(Object.assign({}, getFieldsValues(fieldsRef)), values), contextRef.current, getResolverOptions(namesRef.current.mount, fieldsRef.current, criteriaMode, shouldUseNativeValidation))).errors)
             : await validateForm(fieldsRef.current, true);
-        isValid !== formStateRef.current.isValid &&
+        if (isValid !== formStateRef.current.isValid) {
+            formStateRef.current.isValid = isValid;
             subjectsRef.current.state.next({
                 isValid,
             });
+        }
     }, [criteriaMode, shouldUseNativeValidation]);
     const setValues = React.useCallback((name, value, options) => Object.entries(value).forEach(([fieldKey, fieldValue]) => {
         const fieldName = `${name}.${fieldKey}`;
@@ -1307,9 +1340,36 @@ function useForm({ mode = VALIDATION_MODE.onSubmit, reValidateMode = VALIDATION_
         isFieldWatched(name) && subjectsRef.current.state.next({});
         subjectsRef.current.watch.next({ name, values: getValues() });
     };
-    const handleChange = React.useCallback(async ({ type, target, target: { value, name, type: inputType } }) => {
+    const handleValidate = async (target, fieldState, isWatched, isBlurEvent) => {
         let error;
         let isValid;
+        let name = target.name;
+        const field = get(fieldsRef.current, name);
+        if (resolver) {
+            const { errors } = await resolverRef.current(getFieldsValues(fieldsRef), contextRef.current, getResolverOptions([name], fieldsRef.current, criteriaMode, shouldUseNativeValidation));
+            error = get(errors, name);
+            if (isCheckBoxInput(target) && !error) {
+                const parentNodeName = getNodeParentName(name);
+                const currentError = get(errors, parentNodeName, {});
+                currentError.type && currentError.message && (error = currentError);
+                if (currentError || get(formStateRef.current.errors, parentNodeName)) {
+                    name = parentNodeName;
+                }
+            }
+            isValid = isEmptyObject(errors);
+        }
+        else {
+            error = (await validateField(field, isValidateAllFieldCriteria, shouldUseNativeValidation))[name];
+        }
+        !isBlurEvent &&
+            subjectsRef.current.watch.next({
+                name,
+                type: target.type,
+                values: getValues(),
+            });
+        shouldRenderBaseOnError(false, name, error, fieldState, isValid, isWatched);
+    };
+    const handleChange = React.useCallback(async ({ type, target, target: { value, name, type: inputType } }) => {
         const field = get(fieldsRef.current, name);
         if (field) {
             let inputValue = inputType ? getFieldValue(field) : undefined;
@@ -1325,8 +1385,8 @@ function useForm({ mode = VALIDATION_MODE.onSubmit, reValidateMode = VALIDATION_
             if (!isUndefined(inputValue)) {
                 field._f.value = inputValue;
             }
-            const inputState = updateTouchAndDirtyState(name, field._f.value, isBlurEvent, false);
-            const shouldRender = !isEmptyObject(inputState) || isWatched;
+            const fieldState = updateTouchAndDirtyState(name, field._f.value, isBlurEvent, false);
+            const shouldRender = !isEmptyObject(fieldState) || isWatched;
             if (shouldSkipValidation) {
                 !isBlurEvent &&
                     subjectsRef.current.watch.next({
@@ -1335,35 +1395,12 @@ function useForm({ mode = VALIDATION_MODE.onSubmit, reValidateMode = VALIDATION_
                         values: getValues(),
                     });
                 return (shouldRender &&
-                    subjectsRef.current.state.next(isWatched ? { name } : Object.assign(Object.assign({}, inputState), { name })));
+                    subjectsRef.current.state.next(isWatched ? { name } : Object.assign(Object.assign({}, fieldState), { name })));
             }
             subjectsRef.current.state.next({
                 isValidating: true,
             });
-            if (resolver) {
-                const { errors } = await resolverRef.current(getFieldsValues(fieldsRef), contextRef.current, getResolverOptions([name], fieldsRef.current, criteriaMode, shouldUseNativeValidation));
-                error = get(errors, name);
-                if (isCheckBoxInput(target) && !error) {
-                    const parentNodeName = getNodeParentName(name);
-                    const currentError = get(errors, parentNodeName, {});
-                    currentError.type && currentError.message && (error = currentError);
-                    if (currentError ||
-                        get(formStateRef.current.errors, parentNodeName)) {
-                        name = parentNodeName;
-                    }
-                }
-                isValid = isEmptyObject(errors);
-            }
-            else {
-                error = (await validateField(field, isValidateAllFieldCriteria, shouldUseNativeValidation))[name];
-            }
-            !isBlurEvent &&
-                subjectsRef.current.watch.next({
-                    name,
-                    type,
-                    values: getValues(),
-                });
-            shouldRenderBaseOnError(false, name, error, inputState, isValid, isWatched);
+            handleValidate(target, fieldState, isWatched, isBlurEvent);
         }
     }, []);
     const getValues = (fieldNames) => {
@@ -1465,7 +1502,7 @@ function useForm({ mode = VALIDATION_MODE.onSubmit, reValidateMode = VALIDATION_
             _f: Object.assign(Object.assign(Object.assign({}, (field && field._f ? field._f : { ref: { name } })), { name, mount: true }), options),
         });
         namesRef.current.mount.add(name);
-        !field && updateIsValidAndInputValue(name);
+        !field && updateIsValidAndInputValue(name, undefined, true);
         return isWindowUndefined
             ? { name: name }
             : {