react-hook-form 7.43.4 → 7.43.6

package/dist/index.esm.mjs

@@ -22,6 +22,42 @@ var getNodeParentName = (name) => name.substring(0, name.search(/\.\d+(\.|$)/))
 
 var isNameInFieldArray = (names, name) => names.has(getNodeParentName(name));
 
+var isPlainObject = (tempObject) => {
+    const prototypeCopy = tempObject.constructor && tempObject.constructor.prototype;
+    return (isObject(prototypeCopy) && prototypeCopy.hasOwnProperty('isPrototypeOf'));
+};
+
+var isWeb = typeof window !== 'undefined' &&
+    typeof window.HTMLElement !== 'undefined' &&
+    typeof document !== 'undefined';
+
+function cloneObject(data) {
+    let copy;
+    const isArray = Array.isArray(data);
+    if (data instanceof Date) {
+        copy = new Date(data);
+    }
+    else if (data instanceof Set) {
+        copy = new Set(data);
+    }
+    else if (!(isWeb && (data instanceof Blob || data instanceof FileList)) &&
+        (isArray || isObject(data))) {
+        copy = isArray ? [] : {};
+        if (!Array.isArray(data) && !isPlainObject(data)) {
+            copy = data;
+        }
+        else {
+            for (const key in data) {
+                copy[key] = cloneObject(data[key]);
+            }
+        }
+    }
+    else {
+        return data;
+    }
+    return copy;
+}
+
 var compact = (value) => Array.isArray(value) ? value.filter(Boolean) : [];
 
 var isUndefined = (val) => val === undefined;
@@ -173,6 +209,7 @@ function useSubscribe(props) {
     _props.current = props;
     React.useEffect(() => {
         const subscription = !props.disabled &&
+            _props.current.subject &&
             _props.current.subject.subscribe({
                 next: _props.current.next,
             });
@@ -269,42 +306,6 @@ var generateWatchOutput = (names, _names, formValues, isGlobal, defaultValue) =>
     return formValues;
 };
 
-var isPlainObject = (tempObject) => {
-    const prototypeCopy = tempObject.constructor && tempObject.constructor.prototype;
-    return (isObject(prototypeCopy) && prototypeCopy.hasOwnProperty('isPrototypeOf'));
-};
-
-var isWeb = typeof window !== 'undefined' &&
-    typeof window.HTMLElement !== 'undefined' &&
-    typeof document !== 'undefined';
-
-function cloneObject(data) {
-    let copy;
-    const isArray = Array.isArray(data);
-    if (data instanceof Date) {
-        copy = new Date(data);
-    }
-    else if (data instanceof Set) {
-        copy = new Set(data);
-    }
-    else if (!(isWeb && (data instanceof Blob || data instanceof FileList)) &&
-        (isArray || isObject(data))) {
-        copy = isArray ? [] : {};
-        if (!Array.isArray(data) && !isPlainObject(data)) {
-            copy = data;
-        }
-        else {
-            for (const key in data) {
-                copy[key] = cloneObject(data[key]);
-            }
-        }
-    }
-    else {
-        return data;
-    }
-    return copy;
-}
-
 /**
  * Custom hook to subscribe to field change and isolate re-rendering at the component level.
  *
@@ -340,6 +341,33 @@ function useWatch(props) {
     return value;
 }
 
+var isKey = (value) => /^\w*$/.test(value);
+
+var stringToPath = (input) => compact(input.replace(/["|']|\]/g, '').split(/\.|\[/));
+
+function set(object, path, value) {
+    let index = -1;
+    const tempPath = isKey(path) ? [path] : stringToPath(path);
+    const length = tempPath.length;
+    const lastIndex = length - 1;
+    while (++index < length) {
+        const key = tempPath[index];
+        let newValue = value;
+        if (index !== lastIndex) {
+            const objValue = object[key];
+            newValue =
+                isObject(objValue) || Array.isArray(objValue)
+                    ? objValue
+                    : !isNaN(+tempPath[index + 1])
+                        ? []
+                        : {};
+        }
+        object[key] = newValue;
+        object = object[key];
+    }
+    return object;
+}
+
 /**
  * Custom hook to work with controlled component, this function provide you with both form and field level state. Re-render is isolated at the hook level.
  *
@@ -383,6 +411,7 @@ function useController(props) {
         value,
     }));
     React.useEffect(() => {
+        const _shouldUnregisterField = control._options.shouldUnregister || shouldUnregister;
         const updateMounted = (name, value) => {
             const field = get(control._fields, name);
             if (field) {
@@ -390,8 +419,14 @@ function useController(props) {
             }
         };
         updateMounted(name, true);
+        if (_shouldUnregisterField) {
+            const value = cloneObject(get(control._options.defaultValues, name));
+            set(control._defaultValues, name, value);
+            if (isUndefined(get(control._formValues, name))) {
+                set(control._formValues, name, value);
+            }
+        }
         return () => {
-            const _shouldUnregisterField = control._options.shouldUnregister || shouldUnregister;
             (isArrayField
                 ? _shouldUnregisterField && !control._state.action
                 : _shouldUnregisterField)
@@ -505,33 +540,6 @@ var appendErrors = (name, validateAllFieldCriteria, errors, type, message) => va
     }
     : {};
 
-var isKey = (value) => /^\w*$/.test(value);
-
-var stringToPath = (input) => compact(input.replace(/["|']|\]/g, '').split(/\.|\[/));
-
-function set(object, path, value) {
-    let index = -1;
-    const tempPath = isKey(path) ? [path] : stringToPath(path);
-    const length = tempPath.length;
-    const lastIndex = length - 1;
-    while (++index < length) {
-        const key = tempPath[index];
-        let newValue = value;
-        if (index !== lastIndex) {
-            const objValue = object[key];
-            newValue =
-                isObject(objValue) || Array.isArray(objValue)
-                    ? objValue
-                    : !isNaN(+tempPath[index + 1])
-                        ? []
-                        : {};
-        }
-        object[key] = newValue;
-        object = object[key];
-    }
-    return object;
-}
-
 const focusFieldBy = (fields, callback, fieldsNames) => {
     for (const key of fieldsNames || Object.keys(fields)) {
         const field = get(fields, key);
@@ -1390,7 +1398,7 @@ function createFormControl(props = {}, flushRootRender) {
     let _formState = {
         submitCount: 0,
         isDirty: false,
-        isLoading: true,
+        isLoading: isFunction(_options.defaultValues),
         isValidating: false,
         isSubmitted: false,
         isSubmitting: false,
@@ -1604,7 +1612,7 @@ function createFormControl(props = {}, flushRootRender) {
                 const { _f, ...fieldValue } = field;
                 if (_f) {
                     const isFieldArrayRoot = _names.array.has(_f.name);
-                    const fieldError = await validateField(field, _formValues, shouldDisplayAllAssociatedErrors, _options.shouldUseNativeValidation, isFieldArrayRoot);
+                    const fieldError = await validateField(field, _formValues, shouldDisplayAllAssociatedErrors, _options.shouldUseNativeValidation && !shouldOnlyCheckValid, isFieldArrayRoot);
                     if (fieldError[_f.name]) {
                         context.valid = false;
                         if (shouldOnlyCheckValid) {
@@ -1741,6 +1749,7 @@ function createFormControl(props = {}, flushRootRender) {
     const onChange = async (event) => {
         const target = event.target;
         let name = target.name;
+        let isFieldValueUpdated = true;
         const field = get(_fields, name);
         const getCurrentFieldValue = () => target.type ? getFieldValue(field._f) : getEventValue(event);
         if (field) {
@@ -1787,16 +1796,21 @@ function createFormControl(props = {}, flushRootRender) {
             }
             else {
                 error = (await validateField(field, _formValues, shouldDisplayAllAssociatedErrors, _options.shouldUseNativeValidation))[name];
-                if (error) {
-                    isValid = false;
-                }
-                else if (_proxyFormState.isValid) {
-                    isValid = await executeBuiltInValidation(_fields, true);
+                isFieldValueUpdated = fieldValue === get(_formValues, name, fieldValue);
+                if (isFieldValueUpdated) {
+                    if (error) {
+                        isValid = false;
+                    }
+                    else if (_proxyFormState.isValid) {
+                        isValid = await executeBuiltInValidation(_fields, true);
+                    }
                 }
             }
-            field._f.deps &&
-                trigger(field._f.deps);
-            shouldRenderByError(name, isValid, error, fieldState);
+            if (isFieldValueUpdated) {
+                field._f.deps &&
+                    trigger(field._f.deps);
+                shouldRenderByError(name, isValid, error, fieldState);
+            }
         }
     };
     const trigger = async (name, options = {}) => {
@@ -2265,7 +2279,7 @@ function useForm(props = {}) {
     const [formState, updateFormState] = React.useState({
         isDirty: false,
         isValidating: false,
-        isLoading: true,
+        isLoading: isFunction(props.defaultValues),
         isSubmitted: false,
         isSubmitting: false,
         isSubmitSuccessful: false,