react-hook-form 7.52.2 → 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({
@@ -693,20 +710,25 @@ const iterateFieldsByAction = (fields, action, fieldsNames, abortEarly) => {
             const { _f, ...currentField } = field;
             if (_f) {
                 if (_f.refs && _f.refs[0] && action(_f.refs[0], key) && !abortEarly) {
-                    break;
+                    return true;
                 }
                 else if (_f.ref && action(_f.ref, _f.name) && !abortEarly) {
-                    break;
+                    return true;
                 }
                 else {
-                    iterateFieldsByAction(currentField, action);
+                    if (iterateFieldsByAction(currentField, action)) {
+                        break;
+                    }
                 }
             }
             else if (isObject(currentField)) {
-                iterateFieldsByAction(currentField, action);
+                if (iterateFieldsByAction(currentField, action)) {
+                    break;
+                }
             }
         }
     }
+    return;
 };
 
 var updateFieldArrayRootError = (errors, error, name) => {
@@ -1466,6 +1488,13 @@ var getRuleValue = (rule) => isUndefined(rule)
                 : rule.value
             : rule;
 
+const ASYNC_FUNCTION = 'AsyncFunction';
+var hasPromiseValidation = (fieldReference) => (!fieldReference || !fieldReference.validate) &&
+    !!((isFunction(fieldReference.validate) &&
+        fieldReference.validate.constructor.name === ASYNC_FUNCTION) ||
+        (isObject(fieldReference.validate) &&
+            Object.values(fieldReference.validate).find((validateFunction) => validateFunction.constructor.name === ASYNC_FUNCTION)));
+
 var hasValidation = (options) => options.mount &&
     (options.required ||
         options.min ||
@@ -1589,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);
@@ -1601,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
@@ -1616,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);
@@ -1680,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) => {
@@ -1776,9 +1808,14 @@ function createFormControl(props = {}) {
                 const { _f, ...fieldValue } = field;
                 if (_f) {
                     const isFieldArrayRoot = _names.array.has(_f.name);
-                    _updateIsValidating([name], true);
+                    const isPromiseFunction = field._f && hasPromiseValidation(field._f);
+                    if (isPromiseFunction && _proxyFormState.validatingFields) {
+                        _updateIsValidating([name], true);
+                    }
                     const fieldError = await validateField(field, _formValues, shouldDisplayAllAssociatedErrors, _options.shouldUseNativeValidation && !shouldOnlyCheckValid, isFieldArrayRoot);
-                    _updateIsValidating([name]);
+                    if (isPromiseFunction && _proxyFormState.validatingFields) {
+                        _updateIsValidating([name]);
+                    }
                     if (fieldError[_f.name]) {
                         context.valid = false;
                         if (shouldOnlyCheckValid) {
@@ -1809,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
@@ -1874,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)
@@ -1921,7 +1959,8 @@ function createFormControl(props = {}) {
         const _updateIsFieldValueUpdated = (fieldValue) => {
             isFieldValueUpdated =
                 Number.isNaN(fieldValue) ||
-                    fieldValue === get(_formValues, name, fieldValue);
+                    (isDateObject(fieldValue) && isNaN(fieldValue.getTime())) ||
+                    deepEqual(fieldValue, get(_formValues, name, fieldValue));
         };
         if (field) {
             let error;
@@ -1951,7 +1990,16 @@ function createFormControl(props = {}) {
                     values: { ..._formValues },
                 });
             if (shouldSkipValidation) {
-                _proxyFormState.isValid && _updateValid();
+                if (_proxyFormState.isValid) {
+                    if (props.mode === 'onBlur') {
+                        if (isBlurEvent) {
+                            _updateValid();
+                        }
+                    }
+                    else {
+                        _updateValid();
+                    }
+                }
                 return (shouldRender &&
                     _subjects.state.next({ name, ...(watched ? {} : fieldState) }));
             }
@@ -2114,7 +2162,7 @@ function createFormControl(props = {}) {
     };
     const register = (name, options = {}) => {
         let field = get(_fields, name);
-        const disabledIsDefined = isBoolean(options.disabled);
+        const disabledIsDefined = isBoolean(options.disabled) || isBoolean(props.disabled);
         set(_fields, name, {
             ...(field || {}),
             _f: {
@@ -2128,7 +2176,9 @@ function createFormControl(props = {}) {
         if (field) {
             _updateDisabledField({
                 field,
-                disabled: options.disabled,
+                disabled: isBoolean(options.disabled)
+                    ? options.disabled
+                    : props.disabled,
                 name,
                 value: options.value,
             });
@@ -2137,7 +2187,9 @@ function createFormControl(props = {}) {
             updateValidAndValue(name, true, options.value);
         }
         return {
-            ...(disabledIsDefined ? { disabled: options.disabled } : {}),
+            ...(disabledIsDefined
+                ? { disabled: options.disabled || props.disabled }
+                : {}),
             ...(_options.progressive
                 ? {
                     required: !!options.required,
@@ -2297,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));
@@ -2595,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;
 }