react-hook-form 7.42.0-next.0 → 7.42.1

package/dist/index.esm.mjs

@@ -148,7 +148,8 @@ var getProxyFormState = (formState, control, localProxyFormState, isRoot = true)
 
 var isEmptyObject = (value) => isObject(value) && !Object.keys(value).length;
 
-var shouldRenderFormState = (formStateData, _proxyFormState, isRoot) => {
+var shouldRenderFormState = (formStateData, _proxyFormState, updateFormState, isRoot) => {
+    updateFormState(formStateData);
     const { name, ...formState } = formStateData;
     return (isEmptyObject(formState) ||
         Object.keys(formState).length >= Object.keys(_proxyFormState).length ||
@@ -231,7 +232,7 @@ function useFormState(props) {
         disabled,
         next: (value) => _mounted.current &&
             shouldSubscribeByName(_name.current, value.name, exact) &&
-            shouldRenderFormState(value, _localProxyFormState.current) &&
+            shouldRenderFormState(value, _localProxyFormState.current, control._updateFormState) &&
             updateFormState({
                 ...control._formState,
                 ...value,
@@ -246,7 +247,7 @@ function useFormState(props) {
                 isDirty,
             });
         }
-        control._updateValid();
+        _localProxyFormState.current.isValid && control._updateValid(true);
         return () => {
             _mounted.current = false;
         };
@@ -593,6 +594,15 @@ var isFileInput = (element) => element.type === 'file';
 
 var isFunction = (value) => typeof value === 'function';
 
+var isHTMLElement = (value) => {
+    if (!isWeb) {
+        return false;
+    }
+    const owner = value ? value.ownerDocument : 0;
+    return (value instanceof
+        (owner && owner.defaultView ? owner.defaultView.HTMLElement : HTMLElement));
+};
+
 var isMessage = (value) => isString(value) || React.isValidElement(value);
 
 var isRadioInput = (element) => element.type === 'radio';
@@ -676,8 +686,8 @@ var validateField = async (field, formValues, validateAllFieldCriteria, shouldUs
     const isEmpty = ((valueAsNumber || isFileInput(ref)) &&
         isUndefined(ref.value) &&
         isUndefined(inputValue)) ||
+        (isHTMLElement(ref) && ref.value === '') ||
         inputValue === '' ||
-        ref.value === '' ||
         (Array.isArray(inputValue) && !inputValue.length);
     const appendErrorsCurry = appendErrors.bind(null, name, validateAllFieldCriteria, error);
     const getMinMaxMessage = (exceedMax, maxLengthMessage, minLengthMessage, maxType = INPUT_VALIDATION_RULES.maxLength, minType = INPUT_VALIDATION_RULES.minLength) => {
@@ -1108,7 +1118,7 @@ function useFieldArray(props) {
         control._names.focus &&
             focusFieldBy(control._fields, (key) => !!key && key.startsWith(control._names.focus || ''));
         control._names.focus = '';
-        control._proxyFormState.isValid && control._updateValid();
+        control._updateValid();
     }, [fields, name, control]);
     React.useEffect(() => {
         !get(control._formValues, name) && control._updateFieldArray(name);
@@ -1194,12 +1204,6 @@ function deepEqual(object1, object2) {
     return true;
 }
 
-var isHTMLElement = (value) => {
-    const owner = value ? value.ownerDocument : 0;
-    return (value instanceof
-        (owner && owner.defaultView ? owner.defaultView.HTMLElement : HTMLElement));
-};
-
 var isMultipleSelect = (element) => element.type === `select-multiple`;
 
 var isRadioOrCheckbox = (ref) => isRadioInput(ref) || isCheckBoxInput(ref);
@@ -1436,8 +1440,8 @@ function createFormControl(props = {}, flushRootRender) {
         clearTimeout(timer);
         timer = window.setTimeout(callback, wait);
     };
-    const _updateValid = async () => {
-        if (_proxyFormState.isValid) {
+    const _updateValid = async (shouldUpdateValid) => {
+        if (_proxyFormState.isValid || shouldUpdateValid) {
             const isValid = _options.resolver
                 ? isEmptyObject((await _executeSchema()).errors)
                 : await executeBuiltInValidation(_fields, true);
@@ -1652,7 +1656,7 @@ function createFormControl(props = {}, flushRootRender) {
                 !fieldReference.disabled &&
                     set(_formValues, name, getFieldValueAs(value, fieldReference));
                 fieldValue =
-                    isWeb && isHTMLElement(fieldReference.ref) && isNullOrUndefined(value)
+                    isHTMLElement(fieldReference.ref) && isNullOrUndefined(value)
                         ? ''
                         : value;
                 if (isMultipleSelect(fieldReference.ref)) {
@@ -2140,6 +2144,12 @@ function createFormControl(props = {}, flushRootRender) {
             }
         }
     };
+    const _updateFormState = (updatedFormState) => {
+        _formState = {
+            ..._formState,
+            ...updatedFormState,
+        };
+    };
     if (isFunction(_options.defaultValues)) {
         _options.defaultValues().then((values) => {
             reset(values, _options.resetOptions);
@@ -2162,6 +2172,7 @@ function createFormControl(props = {}, flushRootRender) {
             _updateFieldArray,
             _getFieldArray,
             _reset,
+            _updateFormState,
             _subjects,
             _proxyFormState,
             get _fields() {
@@ -2275,18 +2286,14 @@ function useForm(props = {}) {
     useSubscribe({
         subject: control._subjects.state,
         next: (value) => {
-            if (shouldRenderFormState(value, control._proxyFormState, true)) {
-                control._formState = {
-                    ...control._formState,
-                    ...value,
-                };
+            if (shouldRenderFormState(value, control._proxyFormState, control._updateFormState, true)) {
                 updateFormState({ ...control._formState });
             }
         },
     });
     React.useEffect(() => {
         if (!control._stateFlags.mount) {
-            control._proxyFormState.isValid && control._updateValid();
+            control._updateValid();
             control._stateFlags.mount = true;
         }
         if (control._stateFlags.watch) {