react-hook-form 7.74.0 → 7.75.0

package/dist/index.esm.mjs

@@ -143,9 +143,7 @@ HookFormControlContext.displayName = 'HookFormControlContext';
 const useFormControlContext = () => React.useContext(HookFormControlContext);
 
 var getProxyFormState = (formState, control, localProxyFormState, isRoot = true) => {
-    const result = {
-        defaultValues: control._defaultValues,
-    };
+    const result = {};
     for (const key in formState) {
         Object.defineProperty(result, key, {
             get: () => {
@@ -196,7 +194,10 @@ const useIsomorphicLayoutEffect = typeof window !== 'undefined' ? React.useLayou
 function useFormState(props) {
     const formControl = useFormControlContext();
     const { control = formControl, disabled, name, exact } = props || {};
-    const [formState, updateFormState] = React.useState(control._formState);
+    const [formState, updateFormState] = React.useState(() => ({
+        ...control._formState,
+        defaultValues: control._defaultValues,
+    }));
     const _localProxyFormState = React.useRef({
         isDirty: false,
         isLoading: false,
@@ -216,6 +217,7 @@ function useFormState(props) {
                 updateFormState({
                     ...control._formState,
                     ...formState,
+                    defaultValues: control._defaultValues,
                 });
         },
     }), [name, disabled, exact]);
@@ -639,7 +641,7 @@ 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;
+    const { children, watch, getValues, getFieldState, setError, clearErrors, setValue, setValues, trigger, formState, resetField, reset, handleSubmit, unregister, control, register, setFocus, subscribe, } = props;
     const memoizedValue = React.useMemo(() => ({
         watch,
         getValues,
@@ -647,6 +649,7 @@ const FormProvider = (props) => {
         setError,
         clearErrors,
         setValue,
+        setValues,
         trigger,
         formState,
         resetField,
@@ -670,6 +673,7 @@ const FormProvider = (props) => {
         setError,
         setFocus,
         setValue,
+        setValues,
         subscribe,
         trigger,
         unregister,
@@ -943,6 +947,29 @@ function markFieldsDirty(data, fields = {}) {
     }
     return fields;
 }
+function pruneDirtyFields(value) {
+    if (value === false) {
+        return undefined;
+    }
+    if (value === true) {
+        return true;
+    }
+    if (Array.isArray(value)) {
+        const result = value.map((value) => pruneDirtyFields(value));
+        return (result.some((value) => value !== undefined) ? result : undefined);
+    }
+    if (isObject(value)) {
+        const result = {};
+        for (const key in value) {
+            const pruned = pruneDirtyFields(value[key]);
+            if (!isUndefined(pruned)) {
+                result[key] = pruned;
+            }
+        }
+        return (Object.keys(result).length ? result : undefined);
+    }
+    return undefined;
+}
 function getDirtyFields(data, formValues, dirtyFieldsFromValues) {
     if (!dirtyFieldsFromValues) {
         dirtyFieldsFromValues = markFieldsDirty(formValues);
@@ -962,7 +989,7 @@ function getDirtyFields(data, formValues, dirtyFieldsFromValues) {
             dirtyFieldsFromValues[key] = !deepEqual(value, formValue);
         }
     }
-    return dirtyFieldsFromValues;
+    return pruneDirtyFields(dirtyFieldsFromValues) || {};
 }
 
 const defaultResult = {
@@ -1034,8 +1061,6 @@ 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) {
@@ -1160,7 +1185,8 @@ var shouldRenderFormState = (formStateData, _proxyFormState, updateFormState, is
     updateFormState(formStateData);
     const { name, ...formState } = formStateData;
     return (isEmptyObject(formState) ||
-        Object.keys(formState).length >= Object.keys(_proxyFormState).length ||
+        (isRoot &&
+            Object.keys(formState).length >= Object.keys(_proxyFormState).length) ||
         Object.keys(formState).find((key) => _proxyFormState[key] ===
             (!isRoot || VALIDATION_MODE.all)));
 };
@@ -1403,24 +1429,27 @@ const defaultOptions = {
     reValidateMode: VALIDATION_MODE.onChange,
     shouldFocusError: true,
 };
+const DEFAULT_FORM_STATE = {
+    submitCount: 0,
+    isDirty: false,
+    isReady: false,
+    isValidating: false,
+    isSubmitted: false,
+    isSubmitting: false,
+    isSubmitSuccessful: false,
+    isValid: false,
+    touchedFields: {},
+    dirtyFields: {},
+    validatingFields: {},
+};
 function createFormControl(props = {}) {
     let _options = {
         ...defaultOptions,
         ...props,
     };
     let _formState = {
-        submitCount: 0,
-        isDirty: false,
-        isReady: false,
+        ...cloneObject(DEFAULT_FORM_STATE),
         isLoading: isFunction(_options.defaultValues),
-        isValidating: false,
-        isSubmitted: false,
-        isSubmitting: false,
-        isSubmitSuccessful: false,
-        isValid: false,
-        touchedFields: {},
-        dirtyFields: {},
-        validatingFields: {},
         errors: _options.errors || {},
         disabled: _options.disabled || false,
     };
@@ -1517,10 +1546,8 @@ function createFormControl(props = {}) {
             });
         }
     };
-    const _updateDirtyFields = (name) => {
-        const fullDirtyFields = getDirtyFields(_defaultValues, _formValues);
-        const rootName = getNodeParentName(name);
-        set(_formState.dirtyFields, rootName, get(fullDirtyFields, rootName));
+    const _updateDirtyFields = () => {
+        _formState.dirtyFields = getDirtyFields(_defaultValues, _formValues);
     };
     const _setFieldArray = (name, values = [], method, args, shouldSetValues = true, shouldUpdateFieldsAndState = true) => {
         if (args && method && !_options.disabled) {
@@ -1543,7 +1570,7 @@ function createFormControl(props = {}) {
                 shouldSetValues && set(_formState.touchedFields, name, touchedFields);
             }
             if (_proxyFormState.dirtyFields || _proxySubscribeFormState.dirtyFields) {
-                _updateDirtyFields(name);
+                _updateDirtyFields();
             }
             _subjects.state.next({
                 name,
@@ -1573,13 +1600,31 @@ function createFormControl(props = {}) {
     const updateValidAndValue = (name, shouldSkipSetValueAs, value, ref) => {
         const field = get(_fields, name);
         if (field) {
+            const wasUnsetInFormValues = isUndefined(get(_formValues, name));
             const defaultValue = get(_formValues, name, isUndefined(value) ? get(_defaultValues, name) : value);
             isUndefined(defaultValue) ||
                 (ref && ref.defaultChecked) ||
                 shouldSkipSetValueAs
                 ? set(_formValues, name, shouldSkipSetValueAs ? defaultValue : getFieldValue(field._f))
                 : setFieldValue(name, defaultValue);
-            _state.mount && !_state.action && _setValid();
+            if (_state.mount && !_state.action) {
+                _setValid();
+                // Re-registering a field after a prior unregister puts its key back
+                // into _formValues, which can flip isDirty back to false (#13397).
+                // Only run when we are currently dirty, otherwise an initial register
+                // for a field with no defaultValue would flip isDirty to true. Reset
+                // paths repopulate _formValues before re-register, so the key is
+                // present then and this branch is skipped (preserves keepDirty).
+                if (wasUnsetInFormValues &&
+                    _formState.isDirty &&
+                    (_proxyFormState.isDirty || _proxySubscribeFormState.isDirty)) {
+                    const isDirty = _getDirty();
+                    if (!isDirty) {
+                        _formState.isDirty = false;
+                        _subjects.state.next({ ..._formState });
+                    }
+                }
+            }
         }
     };
     const updateTouchAndDirty = (name, fieldValue, isBlurEvent, shouldDirty, shouldRender) => {
@@ -1869,8 +1914,12 @@ function createFormControl(props = {}) {
                 name,
                 values: cloneObject(_formValues),
             });
-            if (options.shouldDirty) {
-                _updateDirtyFields(name);
+            if ((_proxyFormState.isDirty ||
+                _proxyFormState.dirtyFields ||
+                _proxySubscribeFormState.isDirty ||
+                _proxySubscribeFormState.dirtyFields) &&
+                options.shouldDirty) {
+                _updateDirtyFields();
                 _subjects.state.next({
                     name,
                     dirtyFields: _formState.dirtyFields,
@@ -1889,19 +1938,12 @@ function createFormControl(props = {}) {
             }
         }
         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 watched = isWatched(name, _names);
+            _subjects.state.next({
+                ...(watched && _formState),
+                name: _state.mount || watched ? name : undefined,
+                values: cloneObject(_formValues),
+            });
         }
     };
     const setValues = (formValues) => {
@@ -2910,15 +2952,22 @@ function useFieldArray(props) {
     React.useEffect(() => {
         !get(control._formValues, name) && control._setFieldArray(name);
         return () => {
+            const shouldKeepFieldArrayValues = !(control._options.shouldUnregister || shouldUnregister);
             const updateMounted = (name, value) => {
                 const field = get(control._fields, name);
                 if (field && field._f) {
                     field._f.mount = value;
                 }
             };
-            control._options.shouldUnregister || shouldUnregister
-                ? control.unregister(name)
-                : updateMounted(name, false);
+            if (_actioned.current && shouldKeepFieldArrayValues) {
+                control._subjects.state.next({
+                    name,
+                    values: cloneObject(control._formValues),
+                });
+            }
+            shouldKeepFieldArrayValues
+                ? updateMounted(name, false)
+                : control.unregister(name);
         };
     }, [name, control, keyName, shouldUnregister]);
     return {
@@ -2969,25 +3018,15 @@ function useFieldArray(props) {
 function useForm(props = {}) {
     const _formControl = React.useRef(undefined);
     const _values = React.useRef(undefined);
-    const [formState, updateFormState] = React.useState({
-        isDirty: false,
-        isValidating: false,
+    const [formState, updateFormState] = React.useState(() => ({
+        ...cloneObject(DEFAULT_FORM_STATE),
         isLoading: isFunction(props.defaultValues),
-        isSubmitted: false,
-        isSubmitting: false,
-        isSubmitSuccessful: false,
-        isValid: false,
-        submitCount: 0,
-        dirtyFields: {},
-        touchedFields: {},
-        validatingFields: {},
         errors: props.errors || {},
         disabled: props.disabled || false,
-        isReady: false,
         defaultValues: isFunction(props.defaultValues)
             ? undefined
             : props.defaultValues,
-    });
+    }));
     if (!_formControl.current) {
         if (props.formControl) {
             _formControl.current = {