react-hook-form 7.47.0 → 7.48.1

package/dist/index.esm.mjs

@@ -138,7 +138,7 @@ const useFormContext = () => React.useContext(HookFormContext);
  * @remarks
  * [API](https://react-hook-form.com/docs/useformcontext) • [Demo](https://codesandbox.io/s/react-hook-form-v7-form-context-ytudi)
  *
- * @param props - all useFrom methods
+ * @param props - all useForm methods
  *
  * @example
  * ```tsx
@@ -313,7 +313,7 @@ var generateWatchOutput = (names, _names, formValues, isGlobal, defaultValue) =>
  *
  * @example
  * ```tsx
- * const { watch } = useForm();
+ * const { control } = useForm();
  * const values = useWatch({
  *   name: "fieldName"
  *   control,
@@ -439,6 +439,7 @@ function useController(props) {
                 disabled,
                 fields: control._fields,
                 name,
+                value: get(control._fields, name)._f.value,
             });
         }
     }, [disabled, name, control]);
@@ -446,7 +447,9 @@ function useController(props) {
         field: {
             name,
             value,
-            ...(isBoolean(disabled) ? { disabled } : {}),
+            ...(isBoolean(disabled) || isBoolean(formState.disabled)
+                ? { disabled: formState.disabled || disabled }
+                : {}),
             onChange: React.useCallback((event) => _registerProps.current.onChange({
                 target: {
                     value: getEventValue(event),
@@ -647,28 +650,6 @@ var appendErrors = (name, validateAllFieldCriteria, errors, type, message) => va
     }
     : {};
 
-const focusFieldBy = (fields, callback, fieldsNames) => {
-    for (const key of fieldsNames || Object.keys(fields)) {
-        const field = get(fields, key);
-        if (field) {
-            const { _f, ...currentField } = field;
-            if (_f && callback(_f.name)) {
-                if (_f.ref.focus) {
-                    _f.ref.focus();
-                    break;
-                }
-                else if (_f.refs && _f.refs[0].focus) {
-                    _f.refs[0].focus();
-                    break;
-                }
-            }
-            else if (isObject(currentField)) {
-                focusFieldBy(currentField, callback);
-            }
-        }
-    }
-};
-
 var generateId = () => {
     const d = typeof performance === 'undefined' ? Date.now() : performance.now() * 1000;
     return 'xxxxxxxx-xxxx-4xxx-yxxx-xxxxxxxxxxxx'.replace(/[xy]/g, (c) => {
@@ -696,6 +677,26 @@ var isWatched = (name, _names, isBlurEvent) => !isBlurEvent &&
         [..._names.watch].some((watchName) => name.startsWith(watchName) &&
             /^\.\w+/.test(name.slice(watchName.length))));
 
+const iterateFieldsByAction = (fields, action, fieldsNames, abortEarly) => {
+    for (const key of fieldsNames || Object.keys(fields)) {
+        const field = get(fields, key);
+        if (field) {
+            const { _f, ...currentField } = field;
+            if (_f) {
+                if (_f.refs && _f.refs[0] && action(_f.refs[0], key) && !abortEarly) {
+                    break;
+                }
+                else if (_f.ref && action(_f.ref, _f.name) && !abortEarly) {
+                    break;
+                }
+            }
+            else if (isObject(currentField)) {
+                iterateFieldsByAction(currentField, action);
+            }
+        }
+    }
+};
+
 var updateFieldArrayRootError = (errors, error, name) => {
     const fieldArrayErrors = compact(get(errors, name));
     set(fieldArrayErrors, 'root', error[name]);
@@ -1237,7 +1238,15 @@ function useFieldArray(props) {
             values: { ...control._formValues },
         });
         control._names.focus &&
-            focusFieldBy(control._fields, (key) => !!key && key.startsWith(control._names.focus || ''));
+            iterateFieldsByAction(control._fields, (ref, key) => {
+                if (control._names.focus &&
+                    key.startsWith(control._names.focus) &&
+                    ref.focus) {
+                    ref.focus();
+                    return 1;
+                }
+                return;
+            });
         control._names.focus = '';
         control._updateValid();
         _actioned.current = false;
@@ -1518,6 +1527,7 @@ function createFormControl(props = {}, flushRootRender) {
         touchedFields: {},
         dirtyFields: {},
         errors: {},
+        disabled: false,
     };
     let _fields = {};
     let _defaultValues = isObject(_options.defaultValues) || isObject(_options.values)
@@ -1863,6 +1873,11 @@ function createFormControl(props = {}, flushRootRender) {
         let isFieldValueUpdated = true;
         const field = get(_fields, name);
         const getCurrentFieldValue = () => target.type ? getFieldValue(field._f) : getEventValue(event);
+        const _updateIsFieldValueUpdated = (fieldValue) => {
+            isFieldValueUpdated =
+                Number.isNaN(fieldValue) ||
+                    fieldValue === get(_formValues, name, fieldValue);
+        };
         if (field) {
             let error;
             let isValid;
@@ -1899,17 +1914,18 @@ function createFormControl(props = {}, flushRootRender) {
             _updateIsValidating(true);
             if (_options.resolver) {
                 const { errors } = await _executeSchema([name]);
-                const previousErrorLookupResult = schemaErrorLookup(_formState.errors, _fields, name);
-                const errorLookupResult = schemaErrorLookup(errors, _fields, previousErrorLookupResult.name || name);
-                error = errorLookupResult.error;
-                name = errorLookupResult.name;
-                isValid = isEmptyObject(errors);
+                _updateIsFieldValueUpdated(fieldValue);
+                if (isFieldValueUpdated) {
+                    const previousErrorLookupResult = schemaErrorLookup(_formState.errors, _fields, name);
+                    const errorLookupResult = schemaErrorLookup(errors, _fields, previousErrorLookupResult.name || name);
+                    error = errorLookupResult.error;
+                    name = errorLookupResult.name;
+                    isValid = isEmptyObject(errors);
+                }
             }
             else {
                 error = (await validateField(field, _formValues, shouldDisplayAllAssociatedErrors, _options.shouldUseNativeValidation))[name];
-                isFieldValueUpdated =
-                    Number.isNaN(fieldValue) ||
-                        fieldValue === get(_formValues, name, fieldValue);
+                _updateIsFieldValueUpdated(fieldValue);
                 if (isFieldValueUpdated) {
                     if (error) {
                         isValid = false;
@@ -1926,6 +1942,13 @@ function createFormControl(props = {}, flushRootRender) {
             }
         }
     };
+    const _focusInput = (ref, key) => {
+        if (get(_formState.errors, key) && ref.focus) {
+            ref.focus();
+            return 1;
+        }
+        return;
+    };
     const trigger = async (name, options = {}) => {
         let isValid;
         let validationResult;
@@ -1959,7 +1982,7 @@ function createFormControl(props = {}, flushRootRender) {
         });
         options.shouldFocus &&
             !validationResult &&
-            focusFieldBy(_fields, (key) => key && get(_formState.errors, key), name ? fieldNames : _names.mount);
+            iterateFieldsByAction(_fields, _focusInput, name ? fieldNames : _names.mount);
         return validationResult;
     };
     const getValues = (fieldNames) => {
@@ -2028,13 +2051,15 @@ function createFormControl(props = {}, flushRootRender) {
         });
         !options.keepIsValid && _updateValid();
     };
-    const _updateDisabledField = ({ disabled, name, field, fields, }) => {
+    const _updateDisabledField = ({ disabled, name, field, fields, value, }) => {
         if (isBoolean(disabled)) {
-            const value = disabled
+            const inputValue = disabled
                 ? undefined
-                : get(_formValues, name, getFieldValue(field ? field._f : get(fields, name)._f));
-            set(_formValues, name, value);
-            updateTouchAndDirty(name, value, false, false, true);
+                : isUndefined(value)
+                    ? getFieldValue(field ? field._f : get(fields, name)._f)
+                    : value;
+            set(_formValues, name, inputValue);
+            updateTouchAndDirty(name, inputValue, false, false, true);
         }
     };
     const register = (name, options = {}) => {
@@ -2121,7 +2146,15 @@ function createFormControl(props = {}, flushRootRender) {
         };
     };
     const _focusError = () => _options.shouldFocusError &&
-        focusFieldBy(_fields, (key) => key && get(_formState.errors, key), _names.mount);
+        iterateFieldsByAction(_fields, _focusInput, _names.mount);
+    const _disableForm = (disabled) => {
+        if (isBoolean(props.disabled)) {
+            _subjects.state.next({ disabled: props.disabled });
+            iterateFieldsByAction(_fields, (ref) => {
+                ref.disabled = disabled;
+            }, 0, false);
+        }
+    };
     const handleSubmit = (onValid, onInvalid) => async (e) => {
         if (e) {
             e.preventDefault && e.preventDefault();
@@ -2319,6 +2352,7 @@ function createFormControl(props = {}, flushRootRender) {
             _reset,
             _resetDefaultValues,
             _updateFormState,
+            _disableForm,
             _subjects,
             _proxyFormState,
             get _fields() {
@@ -2418,6 +2452,7 @@ function useForm(props = {}) {
         dirtyFields: {},
         touchedFields: {},
         errors: {},
+        disabled: false,
         defaultValues: isFunction(props.defaultValues)
             ? undefined
             : props.defaultValues,
@@ -2438,6 +2473,7 @@ function useForm(props = {}) {
             }
         },
     });
+    React.useEffect(() => control._disableForm(props.disabled), [control, props.disabled]);
     React.useEffect(() => {
         if (props.values && !deepEqual(props.values, _values.current)) {
             control._reset(props.values, control._options.resetOptions);