react-hook-form 7.39.3 → 7.39.5

package/dist/index.esm.mjs

@@ -239,39 +239,69 @@ function useFormState(props) {
     });
     React.useEffect(() => {
         _mounted.current = true;
+        const isDirty = control._proxyFormState.isDirty && control._getDirty();
+        if (isDirty !== control._formState.isDirty) {
+            control._subjects.state.next({
+                isDirty,
+            });
+        }
+        control._updateValid();
         return () => {
             _mounted.current = false;
         };
-    }, []);
+    }, [control]);
     return getProxyFormState(formState, control, _localProxyFormState.current, false);
 }
 
 var isString = (value) => typeof value === 'string';
 
 var generateWatchOutput = (names, _names, formValues, isGlobal) => {
-    const isArray = Array.isArray(names);
     if (isString(names)) {
         isGlobal && _names.watch.add(names);
         return get(formValues, names);
     }
-    if (isArray) {
-        return names.map((fieldName) => (isGlobal && _names.watch.add(fieldName),
-            get(formValues, fieldName)));
+    if (Array.isArray(names)) {
+        return names.map((fieldName) => (isGlobal && _names.watch.add(fieldName), get(formValues, fieldName)));
     }
-    isGlobal && (_names.watchAll = true);
+    _names.watchAll = !!isGlobal;
     return formValues;
 };
 
-var isFunction = (value) => typeof value === 'function';
+var isPlainObject = (tempObject) => {
+    const prototypeCopy = tempObject.constructor && tempObject.constructor.prototype;
+    return (isObject(prototypeCopy) && prototypeCopy.hasOwnProperty('isPrototypeOf'));
+};
 
-var objectHasFunction = (data) => {
-    for (const key in data) {
-        if (isFunction(data[key])) {
-            return true;
+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]);
+            }
         }
     }
-    return false;
-};
+    else {
+        return data;
+    }
+    return copy;
+}
 
 /**
  * Custom hook to subscribe to field change and isolate re-rendering at the component level.
@@ -297,19 +327,12 @@ function useWatch(props) {
     useSubscribe({
         disabled,
         subject: control._subjects.watch,
-        callback: React.useCallback((formState) => {
+        callback: (formState) => {
             if (shouldSubscribeByName(_name.current, formState.name, exact)) {
                 const fieldValues = generateWatchOutput(_name.current, control._names, formState.values || control._formValues);
-                updateValue(isUndefined(_name.current) ||
-                    (isObject(fieldValues) && !objectHasFunction(fieldValues))
-                    ? { ...fieldValues }
-                    : Array.isArray(fieldValues)
-                        ? [...fieldValues]
-                        : isUndefined(fieldValues)
-                            ? defaultValue
-                            : fieldValues);
+                updateValue(isUndefined(fieldValues) ? defaultValue : cloneObject(fieldValues));
             }
-        }, [control, exact, defaultValue]),
+        },
     });
     const [value, updateValue] = React.useState(isUndefined(defaultValue)
         ? control._getWatch(name)
@@ -562,6 +585,8 @@ var isBoolean = (value) => typeof value === 'boolean';
 
 var isFileInput = (element) => element.type === 'file';
 
+var isFunction = (value) => typeof value === 'function';
+
 var isMessage = (value) => isString(value) || React.isValidElement(value);
 
 var isRadioInput = (element) => element.type === 'radio';
@@ -632,8 +657,8 @@ var validateField = async (field, inputValue, validateAllFieldCriteria, shouldUs
     }
     const inputRef = refs ? refs[0] : ref;
     const setCustomValidity = (message) => {
-        if (shouldUseNativeValidation && isString(message)) {
-            inputRef.setCustomValidity(message);
+        if (shouldUseNativeValidation && inputRef.reportValidity) {
+            inputRef.setCustomValidity(isBoolean(message) ? '' : message || '');
             inputRef.reportValidity();
         }
     };
@@ -804,42 +829,6 @@ function append(data, value) {
     return [...data, ...convertToArrayPayload(value)];
 }
 
-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 fillEmptyArray = (value) => Array.isArray(value) ? value.map(() => undefined) : undefined;
 
 var getValidationModes = (mode) => ({
@@ -1226,6 +1215,15 @@ var isRadioOrCheckbox = (ref) => isRadioInput(ref) || isCheckBoxInput(ref);
 
 var live = (ref) => isHTMLElement(ref) && ref.isConnected;
 
+var objectHasFunction = (data) => {
+    for (const key in data) {
+        if (isFunction(data[key])) {
+            return true;
+        }
+    }
+    return false;
+};
+
 function markFieldsDirty(data, fields = {}) {
     const isParentNodeArray = Array.isArray(data);
     if (isObject(data) || isParentNodeArray) {
@@ -1318,7 +1316,7 @@ var getResolverOptions = (fieldsNames, _fields, criteriaMode, shouldUseNativeVal
 };
 
 var getRuleValue = (rule) => isUndefined(rule)
-    ? undefined
+    ? rule
     : isRegex(rule)
         ? rule.source
         : isObject(rule)
@@ -1466,8 +1464,7 @@ function createFormControl(props = {}) {
                 const fieldValues = method(get(_fields, name), args.argA, args.argB);
                 shouldSetValues && set(_fields, name, fieldValues);
             }
-            if (_proxyFormState.errors &&
-                shouldUpdateFieldsAndState &&
+            if (shouldUpdateFieldsAndState &&
                 Array.isArray(get(_formState.errors, name))) {
                 const errors = method(get(_formState.errors, name), args.argA, args.argB);
                 shouldSetValues && set(_formState.errors, name, errors);
@@ -1512,37 +1509,39 @@ function createFormControl(props = {}) {
         }
     };
     const updateTouchAndDirty = (name, fieldValue, isBlurEvent, shouldDirty, shouldRender) => {
-        let isFieldDirty = false;
+        let shouldUpdateField = false;
+        let isPreviousDirty = false;
         const output = {
             name,
         };
-        const isPreviousFieldTouched = get(_formState.touchedFields, name);
         if (_proxyFormState.isDirty) {
-            const isPreviousFormDirty = _formState.isDirty;
+            isPreviousDirty = _formState.isDirty;
             _formState.isDirty = output.isDirty = _getDirty();
-            isFieldDirty = isPreviousFormDirty !== output.isDirty;
+            shouldUpdateField = isPreviousDirty !== output.isDirty;
         }
         if (_proxyFormState.dirtyFields && (!isBlurEvent || shouldDirty)) {
-            const isPreviousFieldDirty = get(_formState.dirtyFields, name);
+            isPreviousDirty = get(_formState.dirtyFields, name);
             const isCurrentFieldPristine = deepEqual(get(_defaultValues, name), fieldValue);
             isCurrentFieldPristine
                 ? unset(_formState.dirtyFields, name)
                 : set(_formState.dirtyFields, name, true);
             output.dirtyFields = _formState.dirtyFields;
-            isFieldDirty =
-                isFieldDirty ||
-                    isPreviousFieldDirty !== get(_formState.dirtyFields, name);
+            shouldUpdateField =
+                shouldUpdateField || isPreviousDirty !== !isCurrentFieldPristine;
         }
-        if (isBlurEvent && !isPreviousFieldTouched) {
-            set(_formState.touchedFields, name, isBlurEvent);
-            output.touchedFields = _formState.touchedFields;
-            isFieldDirty =
-                isFieldDirty ||
-                    (_proxyFormState.touchedFields &&
-                        isPreviousFieldTouched !== isBlurEvent);
+        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);
+            }
         }
-        isFieldDirty && shouldRender && _subjects.state.next(output);
-        return isFieldDirty ? output : {};
+        shouldUpdateField && shouldRender && _subjects.state.next(output);
+        return shouldUpdateField ? output : {};
     };
     const shouldRenderByError = (name, isValid, error, fieldState) => {
         const previousFieldError = get(_formState.errors, name);
@@ -1644,18 +1643,15 @@ function createFormControl(props = {}) {
     };
     const _getDirty = (name, data) => (name && data && set(_formValues, name, data),
         !deepEqual(getValues(), _defaultValues));
-    const _getWatch = (names, defaultValue, isGlobal) => {
-        const fieldValues = {
-            ...(_stateFlags.mount
-                ? _formValues
-                : isUndefined(defaultValue)
-                    ? _defaultValues
-                    : isString(names)
-                        ? { [names]: defaultValue }
-                        : defaultValue),
-        };
-        return generateWatchOutput(names, _names, fieldValues, isGlobal);
-    };
+    const _getWatch = (names, defaultValue, isGlobal) => generateWatchOutput(names, _names, {
+        ...(_stateFlags.mount
+            ? _formValues
+            : isUndefined(defaultValue)
+                ? _defaultValues
+                : isString(names)
+                    ? { [names]: defaultValue }
+                    : defaultValue),
+    }, isGlobal);
     const _getFieldArray = (name) => compact(get(_stateFlags.mount ? _formValues : _defaultValues, name, props.shouldUnregister ? get(_defaultValues, name, []) : []));
     const setFieldValue = (name, value, options = {}) => {
         const field = get(_fields, name);