react-hook-form 7.54.0 → 7.54.2

package/dist/index.esm.mjs

@@ -492,6 +492,7 @@ function useController(props) {
                 set(control._formValues, name, value);
             }
         }
+        !isArrayField && control.register(name);
         return () => {
             (isArrayField
                 ? _shouldUnregisterField && !control._state.action
@@ -501,14 +502,11 @@ function useController(props) {
         };
     }, [name, control, isArrayField, shouldUnregister]);
     React.useEffect(() => {
-        if (isBoolean(disabled) && get(control._fields, name)) {
-            control._updateDisabledField({
-                disabled,
-                fields: control._fields,
-                name,
-                value: get(control._fields, name)._f.value,
-            });
-        }
+        control._updateDisabledField({
+            disabled,
+            fields: control._fields,
+            name,
+        });
     }, [disabled, name, control]);
     return React.useMemo(() => ({
         field,
@@ -633,7 +631,7 @@ function Form(props) {
                         headers && headers['Content-Type'],
                         encType,
                     ].some((value) => value && value.includes('json'));
-                    const response = await fetch(action, {
+                    const response = await fetch(String(action), {
                         method,
                         headers: {
                             ...headers,
@@ -824,10 +822,10 @@ var getValueAndMessage = (validationData) => isObject(validationData) && !isRege
         message: '',
     };
 
-var validateField = async (field, formValues, validateAllFieldCriteria, shouldUseNativeValidation, isFieldArray) => {
-    const { ref, refs, required, maxLength, minLength, min, max, pattern, validate, name, valueAsNumber, mount, disabled, } = field._f;
+var validateField = async (field, disabledFieldNames, formValues, validateAllFieldCriteria, shouldUseNativeValidation, isFieldArray) => {
+    const { ref, refs, required, maxLength, minLength, min, max, pattern, validate, name, valueAsNumber, mount, } = field._f;
     const inputValue = get(formValues, name);
-    if (!mount || disabled) {
+    if (!mount || disabledFieldNames.has(name)) {
         return {};
     }
     const inputRef = refs ? refs[0] : ref;
@@ -1277,7 +1275,7 @@ function useFieldArray(props) {
                     field._f &&
                     !(getValidationModes(control._options.reValidateMode).isOnSubmit &&
                         getValidationModes(control._options.mode).isOnSubmit)) {
-                    validateField(field, control._formValues, control._options.criteriaMode === VALIDATION_MODE.all, control._options.shouldUseNativeValidation, true).then((error) => !isEmptyObject(error) &&
+                    validateField(field, control._names.disabled, control._formValues, control._options.criteriaMode === VALIDATION_MODE.all, control._options.shouldUseNativeValidation, true).then((error) => !isEmptyObject(error) &&
                         control._subjects.state.next({
                             errors: updateFieldArrayRootError(control._formState.errors, error, name),
                         }));
@@ -1458,9 +1456,6 @@ var getFieldValueAs = (value, { valueAsNumber, valueAsDate, setValueAs }) => isU
 
 function getFieldValue(_f) {
     const ref = _f.ref;
-    if (_f.refs ? _f.refs.every((ref) => ref.disabled) : ref.disabled) {
-        return;
-    }
     if (isFileInput(ref)) {
         return ref.files;
     }
@@ -1603,6 +1598,7 @@ function createFormControl(props = {}) {
     };
     let _names = {
         mount: new Set(),
+        disabled: new Set(),
         unMount: new Set(),
         array: new Set(),
         watch: new Set(),
@@ -1825,7 +1821,7 @@ function createFormControl(props = {}) {
                     if (isPromiseFunction && _proxyFormState.validatingFields) {
                         _updateIsValidating([name], true);
                     }
-                    const fieldError = await validateField(field, _formValues, shouldDisplayAllAssociatedErrors, _options.shouldUseNativeValidation && !shouldOnlyCheckValid, isFieldArrayRoot);
+                    const fieldError = await validateField(field, _names.disabled, _formValues, shouldDisplayAllAssociatedErrors, _options.shouldUseNativeValidation && !shouldOnlyCheckValid, isFieldArrayRoot);
                     if (isPromiseFunction && _proxyFormState.validatingFields) {
                         _updateIsValidating([name]);
                     }
@@ -2004,12 +2000,10 @@ function createFormControl(props = {}) {
                 });
             if (shouldSkipValidation) {
                 if (_proxyFormState.isValid) {
-                    if (_options.mode === 'onBlur') {
-                        if (isBlurEvent) {
-                            _updateValid();
-                        }
+                    if (_options.mode === 'onBlur' && isBlurEvent) {
+                        _updateValid();
                     }
-                    else {
+                    else if (!isBlurEvent) {
                         _updateValid();
                     }
                 }
@@ -2030,7 +2024,7 @@ function createFormControl(props = {}) {
             }
             else {
                 _updateIsValidating([name], true);
-                error = (await validateField(field, _formValues, shouldDisplayAllAssociatedErrors, _options.shouldUseNativeValidation))[name];
+                error = (await validateField(field, _names.disabled, _formValues, shouldDisplayAllAssociatedErrors, _options.shouldUseNativeValidation))[name];
                 _updateIsValidating([name]);
                 _updateIsFieldValueUpdated(fieldValue);
                 if (isFieldValueUpdated) {
@@ -2162,17 +2156,12 @@ function createFormControl(props = {}) {
         });
         !options.keepIsValid && _updateValid();
     };
-    const _updateDisabledField = ({ disabled, name, field, fields, value, }) => {
-        if ((isBoolean(disabled) && _state.mount) || !!disabled) {
-            const inputValue = disabled
-                ? undefined
-                : isUndefined(value)
-                    ? getFieldValue(field ? field._f : get(fields, name)._f)
-                    : value;
-            if (disabled || (!disabled && !isUndefined(inputValue))) {
-                set(_formValues, name, inputValue);
-            }
-            updateTouchAndDirty(name, inputValue, false, false, true);
+    const _updateDisabledField = ({ disabled, name, field, fields, }) => {
+        if ((isBoolean(disabled) && _state.mount) ||
+            !!disabled ||
+            _names.disabled.has(name)) {
+            disabled ? _names.disabled.add(name) : _names.disabled.delete(name);
+            updateTouchAndDirty(name, getFieldValue(field ? field._f : get(fields, name)._f), false, false, true);
         }
     };
     const register = (name, options = {}) => {
@@ -2195,7 +2184,6 @@ function createFormControl(props = {}) {
                     ? options.disabled
                     : _options.disabled,
                 name,
-                value: options.value,
             });
         }
         else {
@@ -2287,13 +2275,12 @@ function createFormControl(props = {}) {
             e.preventDefault && e.preventDefault();
             e.persist && e.persist();
         }
-        if (_options.disabled) {
-            if (onInvalid) {
-                await onInvalid({ ..._formState.errors }, e);
+        let fieldValues = cloneObject(_formValues);
+        if (_names.disabled.size) {
+            for (const name of _names.disabled) {
+                set(fieldValues, name, undefined);
             }
-            return;
         }
-        let fieldValues = cloneObject(_formValues);
         _subjects.state.next({
             isSubmitting: true,
         });
@@ -2416,6 +2403,7 @@ function createFormControl(props = {}) {
             mount: keepStateOptions.keepDirtyValues ? _names.mount : new Set(),
             unMount: new Set(),
             array: new Set(),
+            disabled: new Set(),
             watch: new Set(),
             watchAll: false,
             focus: '',
@@ -2595,8 +2583,8 @@ function createFormControl(props = {}) {
  * ```
  */
 function useForm(props = {}) {
-    const _formControl = React.useRef();
-    const _values = React.useRef();
+    const _formControl = React.useRef(undefined);
+    const _values = React.useRef(undefined);
     const [formState, updateFormState] = React.useState({
         isDirty: false,
         isValidating: false,
@@ -2674,10 +2662,8 @@ function useForm(props = {}) {
                 values: control._getWatch(),
             });
     }, [props.shouldUnregister, control]);
-    return React.useMemo(() => ({
-        ..._formControl.current,
-        formState: getProxyFormState(formState, control),
-    }), [formState, control]);
+    _formControl.current.formState = getProxyFormState(formState, control);
+    return _formControl.current;
 }
 
 export { Controller, Form, FormProvider, appendErrors, get, set, useController, useFieldArray, useForm, useFormContext, useFormState, useWatch };