react-hook-form 7.72.0 → 7.73.1

package/dist/index.esm.mjs

@@ -18,9 +18,9 @@ var getEventValue = (event) => isObject(event) && event.target
         : event.target.value
     : event;
 
-var getNodeParentName = (name) => name.substring(0, name.search(/\.\d+(\.|$)/)) || name;
-
-var isNameInFieldArray = (names, name) => names.has(getNodeParentName(name));
+var isNameInFieldArray = (names, name) => name
+    .split('.')
+    .some((part, index, arr) => !isNaN(Number(part)) && names.has(arr.slice(0, index).join('.')));
 
 var isPlainObject = (tempObject) => {
     const prototypeCopy = tempObject.constructor && tempObject.constructor.prototype;
@@ -64,7 +64,10 @@ var get = (object, path, defaultValue) => {
     if (!path || !isObject(object)) {
         return defaultValue;
     }
-    const result = (isKey(path) ? [path] : stringToPath(path)).reduce((result, key) => isNullOrUndefined(result) ? result : result[key], object);
+    const paths = isKey(path) ? [path] : stringToPath(path);
+    const result = paths.reduce((result, key) => {
+        return isNullOrUndefined(result) ? undefined : result[key];
+    }, object);
     return isUndefined(result) || result === object
         ? isUndefined(object[path])
             ? defaultValue
@@ -239,7 +242,10 @@ var generateWatchOutput = (names, _names, formValues, isGlobal, defaultValue) =>
 
 var isPrimitive = (value) => isNullOrUndefined(value) || !isObjectType(value);
 
-function deepEqual(object1, object2, _internal_visited = new WeakSet()) {
+function deepEqual(object1, object2, visited = new WeakSet()) {
+    if (object1 === object2) {
+        return true;
+    }
     if (isPrimitive(object1) || isPrimitive(object2)) {
         return Object.is(object1, object2);
     }
@@ -251,22 +257,22 @@ function deepEqual(object1, object2, _internal_visited = new WeakSet()) {
     if (keys1.length !== keys2.length) {
         return false;
     }
-    if (_internal_visited.has(object1) || _internal_visited.has(object2)) {
+    if (visited.has(object1) || visited.has(object2)) {
         return true;
     }
-    _internal_visited.add(object1);
-    _internal_visited.add(object2);
+    visited.add(object1);
+    visited.add(object2);
     for (const key of keys1) {
         const val1 = object1[key];
-        if (!keys2.includes(key)) {
+        if (!(key in object2)) {
             return false;
         }
         if (key !== 'ref') {
             const val2 = object2[key];
             if ((isDateObject(val1) && isDateObject(val2)) ||
-                (isObject(val1) && isObject(val2)) ||
-                (Array.isArray(val1) && Array.isArray(val2))
-                ? !deepEqual(val1, val2, _internal_visited)
+                ((isObject(val1) || Array.isArray(val1)) &&
+                    (isObject(val2) || Array.isArray(val2)))
+                ? !deepEqual(val1, val2, visited)
                 : !Object.is(val1, val2)) {
                 return false;
             }
@@ -640,42 +646,43 @@ const useFormContext = () => React.useContext(HookFormContext);
  */
 const FormProvider = (props) => {
     const { children, watch, getValues, getFieldState, setError, clearErrors, setValue, trigger, formState, resetField, reset, handleSubmit, unregister, control, register, setFocus, subscribe, } = props;
-    return (React.createElement(HookFormContext.Provider, { value: React.useMemo(() => ({
-            watch,
-            getValues,
-            getFieldState,
-            setError,
-            clearErrors,
-            setValue,
-            trigger,
-            formState,
-            resetField,
-            reset,
-            handleSubmit,
-            unregister,
-            control,
-            register,
-            setFocus,
-            subscribe,
-        }), [
-            clearErrors,
-            control,
-            formState,
-            getFieldState,
-            getValues,
-            handleSubmit,
-            register,
-            reset,
-            resetField,
-            setError,
-            setFocus,
-            setValue,
-            subscribe,
-            trigger,
-            unregister,
-            watch,
-        ]) },
-        React.createElement(HookFormControlContext.Provider, { value: control }, children)));
+    const memoizedValue = React.useMemo(() => ({
+        watch,
+        getValues,
+        getFieldState,
+        setError,
+        clearErrors,
+        setValue,
+        trigger,
+        formState,
+        resetField,
+        reset,
+        handleSubmit,
+        unregister,
+        control,
+        register,
+        setFocus,
+        subscribe,
+    }), [
+        clearErrors,
+        control,
+        formState,
+        getFieldState,
+        getValues,
+        handleSubmit,
+        register,
+        reset,
+        resetField,
+        setError,
+        setFocus,
+        setValue,
+        subscribe,
+        trigger,
+        unregister,
+        watch,
+    ]);
+    return (React.createElement(HookFormContext.Provider, { value: memoizedValue },
+        React.createElement(HookFormControlContext.Provider, { value: memoizedValue.control }, children)));
 };
 
 const POST_REQUEST = 'post';
@@ -705,7 +712,7 @@ function Form(props) {
     const methods = useFormContext();
     const [mounted, setMounted] = React.useState(false);
     const { control = methods.control, onSubmit, children, action, method = POST_REQUEST, headers, encType, onError, render, onSuccess, validateStatus, ...rest } = props;
-    const submit = async (event) => {
+    const submit = React.useCallback(async (event) => {
         let hasError = false;
         let type = '';
         await control.handleSubmit(async (data) => {
@@ -715,7 +722,7 @@ function Form(props) {
                 formDataJson = JSON.stringify(data);
             }
             catch (_a) { }
-            const flattenFormValues = flatten(control._formValues);
+            const flattenFormValues = flatten(data);
             for (const key in flattenFormValues) {
                 formData.append(key, flattenFormValues[key]);
             }
@@ -762,15 +769,25 @@ function Form(props) {
                 }
             }
         })(event);
-        if (hasError && props.control) {
-            props.control._subjects.state.next({
+        if (hasError && control) {
+            control._subjects.state.next({
                 isSubmitSuccessful: false,
             });
-            props.control.setError('root.server', {
+            control.setError('root.server', {
                 type,
             });
         }
-    };
+    }, [
+        control,
+        onSubmit,
+        method,
+        action,
+        headers,
+        encType,
+        validateStatus,
+        onError,
+        onSuccess,
+    ]);
     React.useEffect(() => {
         setMounted(true);
     }, []);
@@ -879,6 +896,10 @@ function isEmptyArray(obj) {
     return true;
 }
 function unset(object, path) {
+    if (isString(path) && Object.prototype.hasOwnProperty.call(object, path)) {
+        delete object[path];
+        return object;
+    }
     const paths = Array.isArray(path)
         ? path
         : isKey(path)
@@ -1014,6 +1035,8 @@ function getFieldValue(_f) {
     return getFieldValueAs(isUndefined(ref.value) ? _f.ref.value : ref.value, _f);
 }
 
+var getNodeParentName = (name) => name.substring(0, name.search(/\.\d+(\.|$)/)) || name;
+
 var getResolverOptions = (fieldsNames, _fields, criteriaMode, shouldUseNativeValidation) => {
     const fields = {};
     for (const name of fieldsNames) {
@@ -1420,6 +1443,7 @@ function createFormControl(props = {}) {
         unMount: new Set(),
         array: new Set(),
         watch: new Set(),
+        registerName: new Set(),
     };
     let delayErrorCallback;
     let timer = 0;
@@ -1493,6 +1517,11 @@ function createFormControl(props = {}) {
             });
         }
     };
+    const _updateDirtyFields = (name) => {
+        const fullDirtyFields = getDirtyFields(_defaultValues, _formValues);
+        const rootName = getNodeParentName(name);
+        set(_formState.dirtyFields, rootName, get(fullDirtyFields, rootName));
+    };
     const _setFieldArray = (name, values = [], method, args, shouldSetValues = true, shouldUpdateFieldsAndState = true) => {
         if (args && method && !_options.disabled) {
             _state.action = true;
@@ -1514,9 +1543,7 @@ function createFormControl(props = {}) {
                 shouldSetValues && set(_formState.touchedFields, name, touchedFields);
             }
             if (_proxyFormState.dirtyFields || _proxySubscribeFormState.dirtyFields) {
-                const fullDirtyFields = getDirtyFields(_defaultValues, _formValues);
-                const rootName = getNodeParentName(name);
-                set(_formState.dirtyFields, rootName, get(fullDirtyFields, rootName));
+                _updateDirtyFields(name);
             }
             _subjects.state.next({
                 name,
@@ -1834,41 +1861,47 @@ function createFormControl(props = {}) {
         const field = get(_fields, name);
         const isFieldArray = _names.array.has(name);
         const cloneValue = cloneObject(value);
+        const previousValue = get(_formValues, name);
+        const isValueUnchanged = deepEqual(previousValue, cloneValue);
         set(_formValues, name, cloneValue);
         if (isFieldArray) {
             _subjects.array.next({
                 name,
                 values: cloneObject(_formValues),
             });
-            if ((_proxyFormState.isDirty ||
-                _proxyFormState.dirtyFields ||
-                _proxySubscribeFormState.isDirty ||
-                _proxySubscribeFormState.dirtyFields) &&
-                options.shouldDirty) {
+            if (options.shouldDirty) {
+                _updateDirtyFields(name);
                 _subjects.state.next({
                     name,
-                    dirtyFields: getDirtyFields(_defaultValues, _formValues),
+                    dirtyFields: _formState.dirtyFields,
                     isDirty: _getDirty(name, cloneValue),
                 });
             }
         }
         else {
-            field && !field._f && !isNullOrUndefined(cloneValue)
-                ? setValues(name, cloneValue, options)
-                : setFieldValue(name, cloneValue, options);
-        }
-        if (isWatched(name, _names)) {
-            _subjects.state.next({
-                ..._formState,
-                name,
-                values: cloneObject(_formValues),
-            });
+            const isEmpty = (Array.isArray(cloneValue) && !cloneValue.length) ||
+                isEmptyObject(cloneValue);
+            if (!field || field._f || isNullOrUndefined(cloneValue) || isEmpty) {
+                setFieldValue(name, cloneValue, options);
+            }
+            else {
+                setValues(name, cloneValue, options);
+            }
         }
-        else {
-            _subjects.state.next({
-                name: _state.mount ? name : undefined,
-                values: cloneObject(_formValues),
-            });
+        if (!isValueUnchanged) {
+            if (isWatched(name, _names)) {
+                _subjects.state.next({
+                    ..._formState,
+                    name,
+                    values: cloneObject(_formValues),
+                });
+            }
+            else {
+                _subjects.state.next({
+                    name: _state.mount ? name : undefined,
+                    values: cloneObject(_formValues),
+                });
+            }
         }
     };
     const onChange = async (event) => {
@@ -2087,15 +2120,16 @@ function createFormControl(props = {}) {
     const watch = (name, defaultValue) => isFunction(name)
         ? _subjects.state.subscribe({
             next: (payload) => 'values' in payload &&
-                name(_getWatch(undefined, defaultValue), payload),
+                name(payload.values || _getWatch(undefined, defaultValue), payload),
         })
         : _getWatch(name, defaultValue, true);
     const _subscribe = (props) => _subjects.state.subscribe({
         next: (formState) => {
             if (shouldSubscribeByName(props.name, formState.name, props.exact) &&
                 shouldRenderFormState(formState, props.formState || _proxyFormState, _setFormState, props.reRenderRoot)) {
+                const snapshot = { ..._formValues };
                 props.callback({
-                    values: { ..._formValues },
+                    values: snapshot,
                     ..._formState,
                     ...formState,
                     defaultValues: _defaultValues,
@@ -2157,6 +2191,7 @@ function createFormControl(props = {}) {
     const register = (name, options = {}) => {
         let field = get(_fields, name);
         const disabledIsDefined = isBoolean(options.disabled) || isBoolean(_options.disabled);
+        const shouldRevalidateRemount = !_names.registerName.has(name) && field && field._f && !field._f.mount;
         set(_fields, name, {
             ...(field || {}),
             _f: {
@@ -2167,7 +2202,7 @@ function createFormControl(props = {}) {
             },
         });
         _names.mount.add(name);
-        if (field) {
+        if (field && !shouldRevalidateRemount) {
             _setDisabledField({
                 disabled: isBoolean(options.disabled)
                     ? options.disabled
@@ -2197,7 +2232,9 @@ function createFormControl(props = {}) {
             onBlur: onChange,
             ref: (ref) => {
                 if (ref) {
+                    _names.registerName.add(name);
                     register(name, options);
+                    _names.registerName.delete(name);
                     field = get(_fields, name);
                     const fieldRef = isUndefined(ref.value)
                         ? ref.querySelectorAll
@@ -2410,6 +2447,7 @@ function createFormControl(props = {}) {
             mount: keepStateOptions.keepDirtyValues ? _names.mount : new Set(),
             unMount: new Set(),
             array: new Set(),
+            registerName: new Set(),
             disabled: new Set(),
             watch: new Set(),
             watchAll: false,
@@ -2800,10 +2838,11 @@ function useFieldArray(props) {
             control._subjects.state.next({
                 ...control._formState,
             });
+        const validationModes = getValidationModes(control._options.mode);
         if (_actioned.current &&
-            (!getValidationModes(control._options.mode).isOnSubmit ||
-                control._formState.isSubmitted) &&
-            !getValidationModes(control._options.reValidateMode).isOnSubmit) {
+            (!validationModes.isOnSubmit || control._formState.isSubmitted) &&
+            !getValidationModes(control._options.reValidateMode).isOnSubmit &&
+            !validationModes.isOnBlur) {
             if (control._options.resolver) {
                 control._runSchema([name]).then((result) => {
                     control._updateIsValidating([name]);