react-hook-form 7.53.0 → 7.53.1

package/dist/index.esm.mjs

@@ -551,6 +551,22 @@ function useController(props) {
  */
 const Controller = (props) => props.render(useController(props));
 
+const flatten = (obj) => {
+    const output = {};
+    for (const key of Object.keys(obj)) {
+        if (isObjectType(obj[key])) {
+            const nested = flatten(obj[key]);
+            for (const nestedKey of Object.keys(nested)) {
+                output[`${key}.${nestedKey}`] = nested[nestedKey];
+            }
+        }
+        else {
+            output[key] = obj[key];
+        }
+    }
+    return output;
+};
+
 const POST_REQUEST = 'post';
 /**
  * Form component to manage submission.
@@ -588,8 +604,9 @@ function Form(props) {
                 formDataJson = JSON.stringify(data);
             }
             catch (_a) { }
-            for (const name of control._names.mount) {
-                formData.append(name, get(data, name));
+            const flattenFormValues = flatten(control._formValues);
+            for (const key in flattenFormValues) {
+                formData.append(key, flattenFormValues[key]);
             }
             if (onSubmit) {
                 await onSubmit({
@@ -1601,7 +1618,7 @@ function createFormControl(props = {}) {
         timer = setTimeout(callback, wait);
     };
     const _updateValid = async (shouldUpdateValid) => {
-        if (_proxyFormState.isValid || shouldUpdateValid) {
+        if (!props.disabled && (_proxyFormState.isValid || shouldUpdateValid)) {
             const isValid = _options.resolver
                 ? isEmptyObject((await _executeSchema()).errors)
                 : await executeBuiltInValidation(_fields, true);
@@ -1613,7 +1630,8 @@ function createFormControl(props = {}) {
         }
     };
     const _updateIsValidating = (names, isValidating) => {
-        if (_proxyFormState.isValidating || _proxyFormState.validatingFields) {
+        if (!props.disabled &&
+            (_proxyFormState.isValidating || _proxyFormState.validatingFields)) {
             (names || Array.from(_names.mount)).forEach((name) => {
                 if (name) {
                     isValidating
@@ -1628,7 +1646,7 @@ function createFormControl(props = {}) {
         }
     };
     const _updateFieldArray = (name, values = [], method, args, shouldSetValues = true, shouldUpdateFieldsAndState = true) => {
-        if (args && method) {
+        if (args && method && !props.disabled) {
             _state.action = true;
             if (shouldUpdateFieldsAndState && Array.isArray(get(_fields, name))) {
                 const fieldValues = method(get(_fields, name), args.argA, args.argB);
@@ -1692,38 +1710,40 @@ function createFormControl(props = {}) {
         const output = {
             name,
         };
-        const disabledField = !!(get(_fields, name) &&
-            get(_fields, name)._f &&
-            get(_fields, name)._f.disabled);
-        if (!isBlurEvent || shouldDirty) {
-            if (_proxyFormState.isDirty) {
-                isPreviousDirty = _formState.isDirty;
-                _formState.isDirty = output.isDirty = _getDirty();
-                shouldUpdateField = isPreviousDirty !== output.isDirty;
-            }
-            const isCurrentFieldPristine = disabledField || deepEqual(get(_defaultValues, name), fieldValue);
-            isPreviousDirty = !!(!disabledField && get(_formState.dirtyFields, name));
-            isCurrentFieldPristine || disabledField
-                ? unset(_formState.dirtyFields, name)
-                : set(_formState.dirtyFields, name, true);
-            output.dirtyFields = _formState.dirtyFields;
-            shouldUpdateField =
-                shouldUpdateField ||
-                    (_proxyFormState.dirtyFields &&
-                        isPreviousDirty !== !isCurrentFieldPristine);
-        }
-        if (isBlurEvent) {
-            const isPreviousFieldTouched = get(_formState.touchedFields, name);
-            if (!isPreviousFieldTouched) {
-                set(_formState.touchedFields, name, isBlurEvent);
-                output.touchedFields = _formState.touchedFields;
+        if (!props.disabled) {
+            const disabledField = !!(get(_fields, name) &&
+                get(_fields, name)._f &&
+                get(_fields, name)._f.disabled);
+            if (!isBlurEvent || shouldDirty) {
+                if (_proxyFormState.isDirty) {
+                    isPreviousDirty = _formState.isDirty;
+                    _formState.isDirty = output.isDirty = _getDirty();
+                    shouldUpdateField = isPreviousDirty !== output.isDirty;
+                }
+                const isCurrentFieldPristine = disabledField || deepEqual(get(_defaultValues, name), fieldValue);
+                isPreviousDirty = !!(!disabledField && get(_formState.dirtyFields, name));
+                isCurrentFieldPristine || disabledField
+                    ? unset(_formState.dirtyFields, name)
+                    : set(_formState.dirtyFields, name, true);
+                output.dirtyFields = _formState.dirtyFields;
                 shouldUpdateField =
                     shouldUpdateField ||
-                        (_proxyFormState.touchedFields &&
-                            isPreviousFieldTouched !== isBlurEvent);
+                        (_proxyFormState.dirtyFields &&
+                            isPreviousDirty !== !isCurrentFieldPristine);
             }
+            if (isBlurEvent) {
+                const isPreviousFieldTouched = get(_formState.touchedFields, name);
+                if (!isPreviousFieldTouched) {
+                    set(_formState.touchedFields, name, isBlurEvent);
+                    output.touchedFields = _formState.touchedFields;
+                    shouldUpdateField =
+                        shouldUpdateField ||
+                            (_proxyFormState.touchedFields &&
+                                isPreviousFieldTouched !== isBlurEvent);
+                }
+            }
+            shouldUpdateField && shouldRender && _subjects.state.next(output);
         }
-        shouldUpdateField && shouldRender && _subjects.state.next(output);
         return shouldUpdateField ? output : {};
     };
     const shouldRenderByError = (name, isValid, error, fieldState) => {
@@ -1826,8 +1846,9 @@ function createFormControl(props = {}) {
         }
         _names.unMount = new Set();
     };
-    const _getDirty = (name, data) => (name && data && set(_formValues, name, data),
-        !deepEqual(getValues(), _defaultValues));
+    const _getDirty = (name, data) => !props.disabled &&
+        (name && data && set(_formValues, name, data),
+            !deepEqual(getValues(), _defaultValues));
     const _getWatch = (names, defaultValue, isGlobal) => generateWatchOutput(names, _names, {
         ...(_state.mount
             ? _formValues
@@ -1891,7 +1912,7 @@ function createFormControl(props = {}) {
             const fieldName = `${name}.${fieldKey}`;
             const field = get(_fields, fieldName);
             (_names.array.has(name) ||
-                !isPrimitive(fieldValue) ||
+                isObject(fieldValue) ||
                 (field && !field._f)) &&
                 !isDateObject(fieldValue)
                 ? setValues(fieldName, fieldValue, options)
@@ -1938,6 +1959,7 @@ function createFormControl(props = {}) {
         const _updateIsFieldValueUpdated = (fieldValue) => {
             isFieldValueUpdated =
                 Number.isNaN(fieldValue) ||
+                    (isDateObject(fieldValue) && isNaN(fieldValue.getTime())) ||
                     deepEqual(fieldValue, get(_formValues, name, fieldValue));
         };
         if (field) {
@@ -2327,7 +2349,11 @@ function createFormControl(props = {}) {
         }
         if (!keepStateOptions.keepValues) {
             if (keepStateOptions.keepDirtyValues) {
-                for (const fieldName of _names.mount) {
+                const fieldsToCheck = new Set([
+                    ..._names.mount,
+                    ...Object.keys(getDirtyFields(_defaultValues, _formValues)),
+                ]);
+                for (const fieldName of Array.from(fieldsToCheck)) {
                     get(_formState.dirtyFields, fieldName)
                         ? set(values, fieldName, get(_formValues, fieldName))
                         : setValue(fieldName, get(values, fieldName));
@@ -2625,6 +2651,11 @@ function useForm(props = {}) {
                 values: control._getWatch(),
             });
     }, [props.shouldUnregister, control]);
+    React.useEffect(() => {
+        if (_formControl.current) {
+            _formControl.current.watch = _formControl.current.watch.bind({});
+        }
+    }, [formState]);
     _formControl.current.formState = getProxyFormState(formState, control);
     return _formControl.current;
 }