react-hook-form 7.11.2-beta.0 → 7.12.2

package/dist/index.esm.js

@@ -136,10 +136,10 @@ function useFormState(props) {
 
 function useController({ name, rules, defaultValue, control, shouldUnregister, }) {
     const methods = useFormContext();
-    const { defaultValuesRef, register, fieldsRef, unregister, namesRef, subjectsRef, shouldUnmount, inFieldArrayActionRef, _formValues, } = control || methods.control;
-    const fieldValue = get(_formValues.current, name);
-    const [value, setInputStateValue] = React.useState(!isUndefined(fieldValue)
-        ? fieldValue
+    const { defaultValuesRef, register, fieldsRef, unregister, namesRef, subjectsRef, shouldUnmount, inFieldArrayActionRef, } = control || methods.control;
+    const field = get(fieldsRef.current, name);
+    const [value, setInputStateValue] = React.useState(field && field._f && !isUndefined(field._f.value)
+        ? field._f.value
         : isUndefined(get(defaultValuesRef.current, name))
             ? defaultValue
             : get(defaultValuesRef.current, name));
@@ -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]);
@@ -263,6 +267,28 @@ const focusFieldBy = (fields, callback, fieldsNames) => {
     }
 };
 
+const getFieldsValues = (fieldsRef, output = {}) => {
+    for (const name in fieldsRef.current) {
+        const field = fieldsRef.current[name];
+        if (field && !isNullOrUndefined(output)) {
+            const _f = field._f;
+            const current = omit(field, '_f');
+            set(output, name, _f && _f.ref
+                ? _f.ref.disabled || (_f.refs && _f.refs.every((ref) => ref.disabled))
+                    ? undefined
+                    : _f.value
+                : Array.isArray(field)
+                    ? []
+                    : {});
+            current &&
+                getFieldsValues({
+                    current,
+                }, output[name]);
+        }
+    }
+    return output;
+};
+
 var generateId = () => {
     const d = typeof performance === 'undefined' ? Date.now() : performance.now() * 1000;
     return 'xxxxxxxx-xxxx-4xxx-yxxx-xxxxxxxxxxxx'.replace(/[xy]/g, (c) => {
@@ -275,29 +301,30 @@ var mapIds = (values = [], keyName) => values.map((value) => (Object.assign({ [k
 
 var isPrimitive = (value) => isNullOrUndefined(value) || !isObjectType(value);
 
-function deepEqual(object1, object2, isErrorObject) {
+function deepEqual(object1, object2) {
     if (isPrimitive(object1) ||
         isPrimitive(object2) ||
         isDateObject(object1) ||
         isDateObject(object2)) {
         return object1 === object2;
     }
-    if (!React.isValidElement(object1)) {
-        const keys1 = Object.keys(object1);
-        const keys2 = Object.keys(object2);
-        if (keys1.length !== keys2.length) {
+    const keys1 = Object.keys(object1);
+    const keys2 = Object.keys(object2);
+    if (keys1.length !== keys2.length) {
+        return false;
+    }
+    for (const key of keys1) {
+        const val1 = object1[key];
+        if (!keys2.includes(key)) {
             return false;
         }
-        for (const key of keys1) {
-            const val1 = object1[key];
-            if (!(isErrorObject && key === 'ref')) {
-                const val2 = object2[key];
-                if ((isObject(val1) || Array.isArray(val1)) &&
-                    (isObject(val2) || Array.isArray(val2))
-                    ? !deepEqual(val1, val2, isErrorObject)
-                    : val1 !== val2) {
-                    return false;
-                }
+        if (key !== 'ref') {
+            const val2 = object2[key];
+            if ((isObject(val1) || Array.isArray(val1)) &&
+                (isObject(val2) || Array.isArray(val2))
+                ? !deepEqual(val1, val2)
+                : val1 !== val2) {
+                return false;
             }
         }
     }
@@ -348,7 +375,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;
@@ -373,7 +400,7 @@ var moveArrayAt = (data, from, to) => {
 };
 
 function prepend(data, value) {
-    return [...convertToArrayPayload(value), ...data];
+    return [...convertToArrayPayload(value), ...convertToArrayPayload(data)];
 }
 
 function removeAtIndexes(data, indexes) {
@@ -438,9 +465,9 @@ const useFieldArray = ({ control, name, keyName = 'id', shouldUnregister, }) =>
     const methods = useFormContext();
     const focusNameRef = React.useRef('');
     const isMountedRef = React.useRef(false);
-    const { getIsDirty, namesRef, fieldsRef, defaultValuesRef, formStateRef, subjectsRef, readFormStateRef, updateIsValid, fieldArrayDefaultValuesRef, unregister, shouldUnmount, inFieldArrayActionRef, setValues, register, _formValues, } = control || methods.control;
-    const [fields, setFields] = React.useState(mapIds((get(_formValues.current, name) && isMountedRef.current
-        ? get(_formValues.current, name)
+    const { getIsDirty, namesRef, fieldsRef, defaultValuesRef, formStateRef, subjectsRef, readFormStateRef, updateIsValid, fieldArrayDefaultValuesRef, unregister, shouldUnmount, inFieldArrayActionRef, setValues, register, } = control || methods.control;
+    const [fields, setFields] = React.useState(mapIds((get(fieldsRef.current, name) && isMountedRef.current
+        ? get(getFieldsValues(fieldsRef), name)
         : get(fieldArrayDefaultValuesRef.current, getNodeParentName(name))
             ? get(fieldArrayDefaultValuesRef.current, name)
             : get(defaultValuesRef.current, name)) || [], keyName));
@@ -448,7 +475,7 @@ const useFieldArray = ({ control, name, keyName = 'id', shouldUnregister, }) =>
     namesRef.current.array.add(name);
     const omitKey = (fields) => fields.map((field = {}) => omit(field, keyName));
     const getCurrentFieldsValues = () => {
-        const values = get(_formValues.current, name, []);
+        const values = get(getFieldsValues(fieldsRef), name, []);
         return mapIds(get(fieldArrayDefaultValuesRef.current, name, []).map((item, index) => (Object.assign(Object.assign({}, item), values[index]))), keyName);
     };
     const getFocusFieldName = (index, options) => options && !options.shouldFocus
@@ -462,10 +489,6 @@ const useFieldArray = ({ control, name, keyName = 'id', shouldUnregister, }) =>
             const output = method(get(fieldsRef.current, name), args.argA, args.argB);
             shouldSet && set(fieldsRef.current, name, output);
         }
-        if (get(_formValues.current, name)) {
-            const output = method(get(_formValues.current, name), args.argA, args.argB);
-            shouldSet && set(_formValues.current, name, output);
-        }
         if (Array.isArray(get(formStateRef.current.errors, name))) {
             const output = method(get(formStateRef.current.errors, name), args.argA, args.argB);
             shouldSet && set(formStateRef.current.errors, name, output);
@@ -485,6 +508,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,
@@ -585,7 +610,7 @@ const useFieldArray = ({ control, name, keyName = 'id', shouldUnregister, }) =>
         }
         subjectsRef.current.watch.next({
             name,
-            values: _formValues.current,
+            values: getFieldsValues(fieldsRef),
         });
         focusNameRef.current &&
             focusFieldBy(fieldsRef.current, (key) => key.startsWith(focusNameRef.current));
@@ -601,7 +626,6 @@ const useFieldArray = ({ control, name, keyName = 'id', shouldUnregister, }) =>
             next({ name: inputFieldArrayName, values, isReset }) {
                 if (isReset) {
                     unset(fieldsRef.current, inputFieldArrayName || name);
-                    unset(_formValues.current, inputFieldArrayName || name);
                     inputFieldArrayName
                         ? set(fieldArrayDefaultValuesRef.current, inputFieldArrayName, values)
                         : (fieldArrayDefaultValuesRef.current = values);
@@ -609,7 +633,7 @@ const useFieldArray = ({ control, name, keyName = 'id', shouldUnregister, }) =>
                 }
             },
         });
-        !get(_formValues.current, name) && set(_formValues.current, name, []);
+        !get(fieldsRef.current, name) && set(fieldsRef.current, name, []);
         isMountedRef.current = true;
         return () => {
             fieldArraySubscription.unsubscribe();
@@ -618,7 +642,7 @@ const useFieldArray = ({ control, name, keyName = 'id', shouldUnregister, }) =>
                 unset(fieldArrayDefaultValuesRef.current, name);
             }
             else {
-                const fieldArrayValues = get(_formValues.current, name);
+                const fieldArrayValues = get(getFieldsValues(fieldsRef), name);
                 fieldArrayValues &&
                     set(fieldArrayDefaultValuesRef.current, name, fieldArrayValues);
             }
@@ -699,7 +723,7 @@ var getRadioValue = (options) => Array.isArray(options)
 function getFieldValue(field) {
     if (field && field._f) {
         const ref = field._f.ref;
-        if (field._f.refs ? field._f.refs.every((ref) => ref.disabled) : ref.disabled) {
+        if (ref.disabled) {
             return;
         }
         if (isFileInput(ref)) {
@@ -785,8 +809,7 @@ var getValueAndMessage = (validationData) => isObject(validationData) && !isRege
         message: '',
     };
 
-var validateField = async (field, inputValue, validateAllFieldCriteria, shouldUseNativeValidation) => {
-    const { ref, refs, required, maxLength, minLength, min, max, pattern, validate, name, valueAsNumber, mount, } = field._f;
+var validateField = async ({ _f: { ref, refs, required, maxLength, minLength, min, max, pattern, validate, name, value: inputValue, valueAsNumber, mount, }, }, validateAllFieldCriteria, shouldUseNativeValidation) => {
     if (!mount) {
         return {};
     }
@@ -922,6 +945,14 @@ var validateField = async (field, inputValue, validateAllFieldCriteria, shouldUs
     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,
@@ -981,7 +1012,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,
@@ -1005,12 +1036,12 @@ function useForm({ mode = VALIDATION_MODE.onSubmit, reValidateMode = VALIDATION_
     const resolverRef = React.useRef(resolver);
     const formStateRef = React.useRef(formState);
     const fieldsRef = React.useRef({});
-    const _formValues = React.useRef({});
     const defaultValuesRef = React.useRef(defaultValues);
     const fieldArrayDefaultValuesRef = React.useRef({});
     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(),
@@ -1031,22 +1062,44 @@ 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 shouldRenderBaseOnValid = async () => {
+        const isValid = await validateForm(fieldsRef.current, true);
+        if (isValid !== formStateRef.current.isValid) {
+            formStateRef.current.isValid = isValid;
+            subjectsRef.current.state.next({
+                isValid,
+            });
+        }
+    };
+    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)
+                : shouldRenderBaseOnValid()
             : 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) ||
+            (error ? !deepEqual(previousError, error) : previousError) ||
+            !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(Object.assign({}, fieldState), (resolver ? { isValid: !!isValid } : {})), { errors: formStateRef.current.errors, name });
             formStateRef.current = Object.assign(Object.assign({}, formStateRef.current), updatedFormState);
             subjectsRef.current.state.next(isWatched ? { name } : updatedFormState);
         }
@@ -1063,8 +1116,7 @@ function useForm({ mode = VALIDATION_MODE.onSubmit, reValidateMode = VALIDATION_
                 const value = isWeb && isHTMLElement(_f.ref) && isNullOrUndefined(rawValue)
                     ? ''
                     : rawValue;
-                const fieldValue = getFieldValueAs(rawValue, _f);
-                _f.value = fieldValue;
+                _f.value = getFieldValueAs(rawValue, _f);
                 if (isRadioInput(_f.ref)) {
                     (_f.refs || []).forEach((radioRef) => (radioRef.checked = radioRef.value === value));
                 }
@@ -1084,10 +1136,11 @@ function useForm({ mode = VALIDATION_MODE.onSubmit, reValidateMode = VALIDATION_
                 else {
                     _f.ref.value = value;
                 }
-                set(_formValues.current, name, fieldValue);
                 if (shouldRender) {
+                    const values = getFieldsValues(fieldsRef);
+                    set(values, name, rawValue);
                     subjectsRef.current.control.next({
-                        values: Object.assign(Object.assign({}, defaultValuesRef.current), getValues()),
+                        values: Object.assign(Object.assign({}, defaultValuesRef.current), values),
                         name,
                     });
                 }
@@ -1103,13 +1156,13 @@ function useForm({ mode = VALIDATION_MODE.onSubmit, reValidateMode = VALIDATION_
                     },
                     value: rawValue,
                 };
-                set(_formValues.current, name, rawValue);
             }
         }
     }, []);
     const getIsDirty = React.useCallback((name, data) => {
-        name && data && set(_formValues.current, name, data);
-        return !deepEqual(Object.assign({}, getValues()), defaultValuesRef.current);
+        const formValues = getFieldsValues(fieldsRef);
+        name && data && set(formValues, name, data);
+        return !deepEqual(formValues, defaultValuesRef.current);
     }, []);
     const updateTouchAndDirtyState = React.useCallback((name, inputValue, isCurrentTouched, shouldRender = true) => {
         const state = {
@@ -1146,12 +1199,12 @@ function useForm({ mode = VALIDATION_MODE.onSubmit, reValidateMode = VALIDATION_
         return isChanged ? state : {};
     }, []);
     const executeInlineValidation = React.useCallback(async (name, skipReRender) => {
-        const error = (await validateField(get(fieldsRef.current, name), get(getValues(), name), isValidateAllFieldCriteria, shouldUseNativeValidation))[name];
+        const error = (await validateField(get(fieldsRef.current, name), isValidateAllFieldCriteria, shouldUseNativeValidation))[name];
         await shouldRenderBaseOnError(skipReRender, name, error);
         return isUndefined(error);
     }, [isValidateAllFieldCriteria]);
     const executeResolverValidation = React.useCallback(async (names) => {
-        const { errors } = await resolverRef.current(getValues(), contextRef.current, getResolverOptions(namesRef.current.mount, fieldsRef.current, criteriaMode, shouldUseNativeValidation));
+        const { errors } = await resolverRef.current(getFieldsValues(fieldsRef), contextRef.current, getResolverOptions(namesRef.current.mount, fieldsRef.current, criteriaMode, shouldUseNativeValidation));
         if (names) {
             for (const name of names) {
                 const error = get(errors, name);
@@ -1174,7 +1227,7 @@ function useForm({ mode = VALIDATION_MODE.onSubmit, reValidateMode = VALIDATION_
                 const _f = field._f;
                 const current = omit(field, '_f');
                 if (_f) {
-                    const fieldError = await validateField(field, get(getValues(), _f.name), isValidateAllFieldCriteria, shouldUseNativeValidation);
+                    const fieldError = await validateField(field, isValidateAllFieldCriteria, shouldUseNativeValidation);
                     if (shouldCheckValid) {
                         if (fieldError[_f.name]) {
                             context.valid = false;
@@ -1222,38 +1275,42 @@ 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);
-        const fieldValue = get(getValues(), name);
         if (field) {
-            const isValueUndefined = isUndefined(fieldValue);
+            const isValueUndefined = isUndefined(field._f.value);
             const defaultValue = isValueUndefined
                 ? isUndefined(get(fieldArrayDefaultValuesRef.current, name))
                     ? get(defaultValuesRef.current, name)
                     : get(fieldArrayDefaultValuesRef.current, name)
-                : fieldValue;
+                : field._f.value;
             if (!isUndefined(defaultValue)) {
                 if (ref && ref.defaultChecked) {
-                    set(_formValues.current, name, getFieldValue(field));
+                    field._f.value = getFieldValue(field);
+                }
+                else if (shouldSkipValueAs) {
+                    field._f.value = defaultValue;
                 }
                 else {
                     setFieldValue(name, defaultValue);
                 }
             }
             else if (isValueUndefined) {
-                set(_formValues.current, name, getFieldValue(field));
+                field._f.value = getFieldValue(field);
             }
         }
         isMountedRef.current && readFormStateRef.current.isValid && updateIsValid();
     };
-    const updateIsValid = React.useCallback(async () => {
+    const updateIsValid = React.useCallback(async (values = {}) => {
         const isValid = resolver
-            ? isEmptyObject((await resolverRef.current(getValues(), contextRef.current, getResolverOptions(namesRef.current.mount, fieldsRef.current, criteriaMode, shouldUseNativeValidation))).errors)
+            ? 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}`;
@@ -1284,21 +1341,45 @@ function useForm({ mode = VALIDATION_MODE.onSubmit, reValidateMode = VALIDATION_
                 });
             }
             !value.length &&
+                set(fieldsRef.current, name, []) &&
                 set(fieldArrayDefaultValuesRef.current, name, []);
         }
-        set(_formValues.current, name, value);
         ((field && !field._f) || isFieldArray) && !isNullOrUndefined(value)
             ? setValues(name, value, isFieldArray ? {} : options)
             : setFieldValue(name, value, options, true, !field);
         isFieldWatched(name) && subjectsRef.current.state.next({});
-        subjectsRef.current.watch.next({
-            name,
-            values: getValues(),
-        });
+        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;
@@ -1312,10 +1393,10 @@ function useForm({ mode = VALIDATION_MODE.onSubmit, reValidateMode = VALIDATION_
                     isReValidateOnChange }, validationMode));
             const isWatched = !isBlurEvent && isFieldWatched(name);
             if (!isUndefined(inputValue)) {
-                set(_formValues.current, name, inputValue);
+                field._f.value = inputValue;
             }
-            const inputState = updateTouchAndDirtyState(name, inputValue, 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({
@@ -1324,39 +1405,16 @@ 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(getValues(), 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, get(getValues(), name), 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) => {
-        const values = Object.assign(Object.assign({}, defaultValuesRef.current), _formValues.current);
+        const values = Object.assign(Object.assign({}, defaultValuesRef.current), getFieldsValues(fieldsRef));
         return isUndefined(fieldNames)
             ? values
             : isString(fieldNames)
@@ -1383,12 +1441,12 @@ function useForm({ mode = VALIDATION_MODE.onSubmit, reValidateMode = VALIDATION_
     };
     const watchInternal = React.useCallback((fieldNames, defaultValue, isGlobal, formValues) => {
         const isArrayNames = Array.isArray(fieldNames);
-        const fieldValues = Object.assign({}, (formValues || isMountedRef.current
-            ? Object.assign(Object.assign({}, defaultValuesRef.current), (formValues || getValues())) : isUndefined(defaultValue)
+        const fieldValues = formValues || isMountedRef.current
+            ? Object.assign(Object.assign({}, defaultValuesRef.current), (formValues || getFieldsValues(fieldsRef))) : isUndefined(defaultValue)
             ? defaultValuesRef.current
             : isArrayNames
                 ? defaultValue
-                : { [fieldNames]: defaultValue }));
+                : { [fieldNames]: defaultValue };
         if (isUndefined(fieldNames)) {
             isGlobal && (namesRef.current.watchAll = true);
             return fieldValues;
@@ -1398,12 +1456,7 @@ function useForm({ mode = VALIDATION_MODE.onSubmit, reValidateMode = VALIDATION_
             isGlobal && namesRef.current.watch.add(fieldName);
             result.push(get(fieldValues, fieldName));
         }
-        return isArrayNames
-            ? result
-            : isObject(result[0])
-                ? Object.assign({}, result[0]) : Array.isArray(result[0])
-                ? [...result[0]]
-                : result[0];
+        return isArrayNames ? result : result[0];
     }, []);
     const watch = (fieldName, defaultValue) => isFunction(fieldName)
         ? subjectsRef.current.watch.subscribe({
@@ -1417,11 +1470,8 @@ function useForm({ mode = VALIDATION_MODE.onSubmit, reValidateMode = VALIDATION_
             namesRef.current.mount.delete(inputName);
             namesRef.current.array.delete(inputName);
             if (get(fieldsRef.current, inputName)) {
-                if (!options.keepValue) {
-                    unset(fieldsRef.current, inputName);
-                    unset(_formValues.current, inputName);
-                }
                 !options.keepError && unset(formStateRef.current.errors, inputName);
+                !options.keepValue && unset(fieldsRef.current, inputName);
                 !options.keepDirty &&
                     unset(formStateRef.current.dirtyFields, inputName);
                 !options.keepTouched &&
@@ -1461,22 +1511,15 @@ function useForm({ mode = VALIDATION_MODE.onSubmit, reValidateMode = VALIDATION_
         set(fieldsRef.current, name, {
             _f: Object.assign(Object.assign(Object.assign({}, (field && field._f ? field._f : { ref: { name } })), { name, mount: true }), options),
         });
-        if (options.value) {
-            set(_formValues.current, name, options.value);
-        }
-        if (!isUndefined(options.disabled) &&
-            field &&
-            field._f &&
-            field._f.ref.disabled !== options.disabled) {
-            set(_formValues.current, name, options.disabled ? undefined : field._f.ref.value);
-        }
         namesRef.current.mount.add(name);
-        !field && updateIsValidAndInputValue(name);
+        !field && updateIsValidAndInputValue(name, undefined, true);
         return isWindowUndefined
             ? { name: name }
-            : Object.assign(Object.assign({ name }, (isUndefined(options.disabled)
-                ? {}
-                : { disabled: options.disabled })), { onChange: handleChange, onBlur: handleChange, ref: (ref) => {
+            : {
+                name,
+                onChange: handleChange,
+                onBlur: handleChange,
+                ref: (ref) => {
                     if (ref) {
                         registerFieldRef(name, ref, options);
                     }
@@ -1485,13 +1528,20 @@ function useForm({ mode = VALIDATION_MODE.onSubmit, reValidateMode = VALIDATION_
                         const shouldUnmount = shouldUnregister || options.shouldUnregister;
                         if (field._f) {
                             field._f.mount = false;
+                            // If initial state of field element is disabled,
+                            // value is not set on first "register"
+                            // re-sync the value in when it switched to enabled
+                            if (isUndefined(field._f.value)) {
+                                field._f.value = field._f.ref.value;
+                            }
                         }
                         shouldUnmount &&
                             !(isNameInFieldArray(namesRef.current.array, name) &&
                                 inFieldArrayActionRef.current) &&
                             namesRef.current.unMount.add(name);
                     }
-                } });
+                },
+            };
     }, []);
     const handleSubmit = React.useCallback((onValid, onInvalid) => async (e) => {
         if (e) {
@@ -1499,7 +1549,7 @@ function useForm({ mode = VALIDATION_MODE.onSubmit, reValidateMode = VALIDATION_
             e.persist && e.persist();
         }
         let hasNoPromiseError = true;
-        let fieldValues = Object.assign({}, _formValues.current);
+        let fieldValues = getFieldsValues(fieldsRef);
         subjectsRef.current.state.next({
             isSubmitting: true,
         });
@@ -1584,7 +1634,6 @@ function useForm({ mode = VALIDATION_MODE.onSubmit, reValidateMode = VALIDATION_
         }
         if (!keepStateOptions.keepValues) {
             fieldsRef.current = {};
-            _formValues.current = {};
             subjectsRef.current.control.next({
                 values: keepStateOptions.keepDefaultValues
                     ? defaultValuesRef.current
@@ -1642,8 +1691,9 @@ function useForm({ mode = VALIDATION_MODE.onSubmit, reValidateMode = VALIDATION_
         const useFieldArraySubscription = subjectsRef.current.array.subscribe({
             next(state) {
                 if (state.values && state.name && readFormStateRef.current.isValid) {
-                    set(_formValues.current, state.name, state.values);
-                    updateIsValid();
+                    const values = getFieldsValues(fieldsRef);
+                    set(values, state.name, state.values);
+                    updateIsValid(values);
                 }
             },
         });
@@ -1687,7 +1737,6 @@ function useForm({ mode = VALIDATION_MODE.onSubmit, reValidateMode = VALIDATION_
             defaultValuesRef,
             fieldArrayDefaultValuesRef,
             setValues,
-            _formValues,
             unregister,
             shouldUnmount: shouldUnregister,
         }), []),