react-hook-form 7.43.1 → 7.43.3

package/dist/index.esm.mjs

@@ -328,7 +328,7 @@ function useWatch(props) {
     _name.current = name;
     useSubscribe({
         disabled,
-        subject: control._subjects.watch,
+        subject: control._subjects.values,
         next: (formState) => {
             if (shouldSubscribeByName(_name.current, formState.name, exact)) {
                 updateValue(cloneObject(generateWatchOutput(_name.current, control._names, formState.values || control._formValues, false, defaultValue)));
@@ -603,7 +603,7 @@ var isHTMLElement = (value) => {
         (owner && owner.defaultView ? owner.defaultView.HTMLElement : HTMLElement));
 };
 
-var isMessage = (value) => isString(value) || React.isValidElement(value);
+var isMessage = (value) => isString(value);
 
 var isRadioInput = (element) => element.type === 'radio';
 
@@ -1083,7 +1083,10 @@ function useFieldArray(props) {
     };
     React.useEffect(() => {
         control._stateFlags.action = false;
-        isWatched(name, control._names) && control._subjects.state.next({});
+        isWatched(name, control._names) &&
+            control._subjects.state.next({
+                ...control._formState,
+            });
         if (_actioned.current &&
             (!getValidationModes(control._options.mode).isOnSubmit ||
                 control._formState.isSubmitted)) {
@@ -1111,7 +1114,7 @@ function useFieldArray(props) {
                 }
             }
         }
-        control._subjects.watch.next({
+        control._subjects.values.next({
             name,
             values: control._formValues,
         });
@@ -1146,8 +1149,11 @@ function useFieldArray(props) {
 function createSubject() {
     let _observers = [];
     const next = (value) => {
-        for (const observer of _observers) {
-            observer.next(value);
+        let x = 0;
+        const l = _observers.length;
+        while (x < l) {
+            _observers[x].next(value);
+            ++x;
         }
     };
     const subscribe = (observer) => {
@@ -1252,9 +1258,7 @@ function getDirtyFieldsFromDefaultValues(data, formValues, dirtyFieldsFromValues
                 }
             }
             else {
-                deepEqual(data[key], formValues[key])
-                    ? delete dirtyFieldsFromValues[key]
-                    : (dirtyFieldsFromValues[key] = true);
+                dirtyFieldsFromValues[key] = !deepEqual(data[key], formValues[key]);
             }
         }
     }
@@ -1386,7 +1390,6 @@ function createFormControl(props = {}, flushRootRender) {
         ...defaultOptions,
         ...props,
     };
-    const shouldCaptureDirtyFields = props.resetOptions && props.resetOptions.keepDirtyValues;
     let _formState = {
         submitCount: 0,
         isDirty: false,
@@ -1420,6 +1423,7 @@ function createFormControl(props = {}, flushRootRender) {
     };
     let delayErrorCallback;
     let timer = 0;
+    const shouldCaptureDirtyFields = props.resetOptions && props.resetOptions.keepDirtyValues;
     const _proxyFormState = {
         isDirty: false,
         dirtyFields: false,
@@ -1429,7 +1433,7 @@ function createFormControl(props = {}, flushRootRender) {
         errors: false,
     };
     const _subjects = {
-        watch: createSubject(),
+        values: createSubject(),
         array: createSubject(),
         state: createSubject(),
     };
@@ -1438,7 +1442,7 @@ function createFormControl(props = {}, flushRootRender) {
     const shouldDisplayAllAssociatedErrors = _options.criteriaMode === VALIDATION_MODE.all;
     const debounce = (callback) => (wait) => {
         clearTimeout(timer);
-        timer = window.setTimeout(callback, wait);
+        timer = setTimeout(callback, wait);
     };
     const _updateValid = async (shouldUpdateValid) => {
         if (_proxyFormState.isValid || shouldUpdateValid) {
@@ -1681,8 +1685,9 @@ function createFormControl(props = {}, flushRootRender) {
                 else {
                     fieldReference.ref.value = fieldValue;
                     if (!fieldReference.ref.type) {
-                        _subjects.watch.next({
+                        _subjects.values.next({
                             name,
+                            values: { ..._formValues },
                         });
                     }
                 }
@@ -1713,7 +1718,7 @@ function createFormControl(props = {}, flushRootRender) {
         if (isFieldArray) {
             _subjects.array.next({
                 name,
-                values: _formValues,
+                values: { ..._formValues },
             });
             if ((_proxyFormState.isDirty || _proxyFormState.dirtyFields) &&
                 options.shouldDirty) {
@@ -1729,9 +1734,10 @@ function createFormControl(props = {}, flushRootRender) {
                 ? setValues(name, cloneValue, options)
                 : setFieldValue(name, cloneValue, options);
         }
-        isWatched(name, _names) && _subjects.state.next({});
-        _subjects.watch.next({
+        isWatched(name, _names) && _subjects.state.next({ ..._formState });
+        _subjects.values.next({
             name,
+            values: { ..._formValues },
         });
         !_stateFlags.mount && flushRootRender();
     };
@@ -1762,16 +1768,17 @@ function createFormControl(props = {}, flushRootRender) {
             const fieldState = updateTouchAndDirty(name, fieldValue, isBlurEvent, false);
             const shouldRender = !isEmptyObject(fieldState) || watched;
             !isBlurEvent &&
-                _subjects.watch.next({
+                _subjects.values.next({
                     name,
                     type: event.type,
+                    values: { ..._formValues },
                 });
             if (shouldSkipValidation) {
                 _proxyFormState.isValid && _updateValid();
                 return (shouldRender &&
                     _subjects.state.next({ name, ...(watched ? {} : fieldState) }));
             }
-            !isBlurEvent && watched && _subjects.state.next({});
+            !isBlurEvent && watched && _subjects.state.next({ ..._formState });
             _updateIsValidating(true);
             if (_options.resolver) {
                 const { errors } = await _executeSchema([name]);
@@ -1869,7 +1876,7 @@ function createFormControl(props = {}, flushRootRender) {
         options && options.shouldFocus && ref && ref.focus && ref.focus();
     };
     const watch = (name, defaultValue) => isFunction(name)
-        ? _subjects.watch.subscribe({
+        ? _subjects.values.subscribe({
             next: (payload) => name(_getWatch(undefined, defaultValue), payload),
         })
         : _getWatch(name, defaultValue, true);
@@ -1890,7 +1897,9 @@ function createFormControl(props = {}, flushRootRender) {
                     unset(_defaultValues, fieldName);
             }
         }
-        _subjects.watch.next({});
+        _subjects.values.next({
+            values: { ..._formValues },
+        });
         _subjects.state.next({
             ..._formState,
             ...(!options.keepDirty ? {} : { isDirty: _getDirty() }),
@@ -2007,6 +2016,7 @@ function createFormControl(props = {}, flushRootRender) {
                 await onInvalid({ ..._formState.errors }, e);
             }
             _focusError();
+            setTimeout(_focusError);
         }
         _subjects.state.next({
             isSubmitted: true,
@@ -2086,7 +2096,7 @@ function createFormControl(props = {}, flushRootRender) {
             _subjects.array.next({
                 values,
             });
-            _subjects.watch.next({
+            _subjects.values.next({
                 values,
             });
         }
@@ -2106,14 +2116,14 @@ function createFormControl(props = {}, flushRootRender) {
             submitCount: keepStateOptions.keepSubmitCount
                 ? _formState.submitCount
                 : 0,
-            isDirty: keepStateOptions.keepDirty || keepStateOptions.keepDirtyValues
+            isDirty: keepStateOptions.keepDirty
                 ? _formState.isDirty
                 : !!(keepStateOptions.keepDefaultValues &&
                     !deepEqual(formValues, _defaultValues)),
             isSubmitted: keepStateOptions.keepIsSubmitted
                 ? _formState.isSubmitted
                 : false,
-            dirtyFields: keepStateOptions.keepDirty || keepStateOptions.keepDirtyValues
+            dirtyFields: keepStateOptions.keepDirtyValues
                 ? _formState.dirtyFields
                 : keepStateOptions.keepDefaultValues && formValues
                     ? getDirtyFields(_defaultValues, formValues)
@@ -2162,7 +2172,6 @@ function createFormControl(props = {}, flushRootRender) {
             unregister,
             getFieldState,
             _executeSchema,
-            _focusError,
             _getWatch,
             _getDirty,
             _updateValid,
@@ -2289,6 +2298,11 @@ function useForm(props = {}) {
             }
         },
     });
+    React.useEffect(() => {
+        if (props.values && !deepEqual(props.values, control._defaultValues)) {
+            control._reset(props.values, control._options.resetOptions);
+        }
+    }, [props.values, control]);
     React.useEffect(() => {
         if (!control._stateFlags.mount) {
             control._updateValid();
@@ -2296,18 +2310,10 @@ function useForm(props = {}) {
         }
         if (control._stateFlags.watch) {
             control._stateFlags.watch = false;
-            control._subjects.state.next({});
+            control._subjects.state.next({ ...control._formState });
         }
         control._removeUnmounted();
     });
-    React.useEffect(() => {
-        if (props.values && !deepEqual(props.values, control._defaultValues)) {
-            control._reset(props.values, control._options.resetOptions);
-        }
-    }, [props.values, control]);
-    React.useEffect(() => {
-        formState.submitCount && control._focusError();
-    }, [control, formState.submitCount]);
     _formControl.current.formState = getProxyFormState(formState, control);
     return _formControl.current;
 }