react-hook-form 7.17.4 → 7.18.1

package/dist/index.esm.js

@@ -159,6 +159,7 @@ function useFormState(props) {
             shouldRenderFormState(formState, _localProxyFormState.current) &&
             updateFormState(Object.assign(Object.assign({}, control._formState), formState)),
         subject: control._subjects.state,
+        skipEarlySubscription: true,
     });
     return getProxyFormState(formState, control._proxyFormState, _localProxyFormState.current, false);
 }
@@ -177,6 +178,7 @@ function useController(props) {
         subject: control._subjects.control,
         callback: (data) => (!data.name || _name.current === data.name) &&
             setInputStateValue(get(data.values, _name.current)),
+        skipEarlySubscription: true,
     });
     const registerProps = control.register(name, Object.assign(Object.assign({}, props.rules), { value }));
     const updateMounted = React.useCallback((name, value) => {
@@ -377,6 +379,7 @@ const useFieldArray = (props) => {
     const [fields, setFields] = React.useState(mapIds(control._getFieldArray(name), keyName));
     const _fieldIds = React.useRef(fields);
     const _name = React.useRef(name);
+    const _actioned = React.useRef(false);
     _name.current = name;
     _fieldIds.current = fields;
     control._names.array.add(name);
@@ -391,6 +394,7 @@ const useFieldArray = (props) => {
     });
     const updateValues = React.useCallback((updatedFieldArrayValuesWithKey) => {
         const updatedFieldArrayValues = omitKeys(updatedFieldArrayValuesWithKey, keyName);
+        _actioned.current = true;
         set(control._formValues, name, updatedFieldArrayValues);
         setFields(updatedFieldArrayValuesWithKey);
         return updatedFieldArrayValues;
@@ -466,6 +470,17 @@ const useFieldArray = (props) => {
                 }
             }
         }
+        if (_actioned.current) {
+            control._executeSchema([name]).then((result) => {
+                const error = get(result.errors, name);
+                if (error && error.type && !get(control._formState.errors, name)) {
+                    set(control._formState.errors, name, error);
+                    control._subjects.state.next({
+                        errors: control._formState.errors,
+                    });
+                }
+            });
+        }
         control._subjects.watch.next({
             name,
             values: control._formValues,
@@ -523,6 +538,60 @@ function cloneObject(data) {
     return copy;
 }
 
+function createSubscription() {
+    let tearDowns = [];
+    const add = (tearDown) => {
+        tearDowns.push(tearDown);
+    };
+    const unsubscribe = () => {
+        for (const teardown of tearDowns) {
+            teardown();
+        }
+        tearDowns = [];
+    };
+    return {
+        add,
+        unsubscribe,
+    };
+}
+function createSubscriber(observer, subscription) {
+    let closed = false;
+    subscription.add(() => (closed = true));
+    const next = (value) => {
+        if (!closed) {
+            observer.next(value);
+        }
+    };
+    return {
+        next,
+    };
+}
+function createSubject() {
+    let _observers = [];
+    const next = (value) => {
+        for (const observer of _observers) {
+            observer.next(value);
+        }
+    };
+    const subscribe = (observer) => {
+        const subscription = createSubscription();
+        const subscriber = createSubscriber(observer, subscription);
+        _observers.push(subscriber);
+        return subscription;
+    };
+    const unsubscribe = () => {
+        _observers = [];
+    };
+    return {
+        get observers() {
+            return _observers;
+        },
+        next,
+        subscribe,
+        unsubscribe,
+    };
+}
+
 var isPrimitive = (value) => isNullOrUndefined(value) || !isObjectType(value);
 
 function deepEqual(object1, object2) {
@@ -566,6 +635,8 @@ var getValidationModes = (mode) => ({
 
 var isBoolean = (value) => typeof value === 'boolean';
 
+var isFileInput = (element) => element.type === 'file';
+
 var isHTMLElement = (value) => value instanceof HTMLElement;
 
 var isMultipleSelect = (element) => element.type === `select-multiple`;
@@ -582,52 +653,6 @@ var isWeb = typeof window !== 'undefined' &&
 
 var live = (ref) => isHTMLElement(ref) && document.contains(ref);
 
-class Subscription {
-    constructor() {
-        this.tearDowns = [];
-    }
-    add(tearDown) {
-        this.tearDowns.push(tearDown);
-    }
-    unsubscribe() {
-        for (const teardown of this.tearDowns) {
-            teardown();
-        }
-        this.tearDowns = [];
-    }
-}
-class Subscriber {
-    constructor(observer, subscription) {
-        this.observer = observer;
-        this.closed = false;
-        subscription.add(() => (this.closed = true));
-    }
-    next(value) {
-        if (!this.closed) {
-            this.observer.next(value);
-        }
-    }
-}
-class Subject {
-    constructor() {
-        this.observers = [];
-    }
-    next(value) {
-        for (const observer of this.observers) {
-            observer.next(value);
-        }
-    }
-    subscribe(observer) {
-        const subscription = new Subscription();
-        const subscriber = new Subscriber(observer, subscription);
-        this.observers.push(subscriber);
-        return subscription;
-    }
-    unsubscribe() {
-        this.observers = [];
-    }
-}
-
 function baseGet(object, updatePath) {
     const length = updatePath.slice(0, -1).length;
     let index = 0;
@@ -667,8 +692,6 @@ function unset(object, path) {
     return object;
 }
 
-var isFileInput = (element) => element.type === 'file';
-
 const defaultResult = {
     value: false,
     isValid: false,
@@ -762,6 +785,35 @@ var hasValidation = (options) => options.mount &&
         options.pattern ||
         options.validate);
 
+function schemaErrorLookup(errors, _fields, name) {
+    const error = get(errors, name);
+    if (error || isKey(name)) {
+        return {
+            error,
+            name,
+        };
+    }
+    const names = name.split('.');
+    while (names.length) {
+        const fieldName = names.join('.');
+        const field = get(_fields, fieldName);
+        const foundError = get(errors, fieldName);
+        if (field && !Array.isArray(field) && name !== fieldName) {
+            return { name };
+        }
+        if (foundError && foundError.type) {
+            return {
+                name: fieldName,
+                error: foundError,
+            };
+        }
+        names.pop();
+    }
+    return {
+        name,
+    };
+}
+
 function deepMerge(target, source) {
     if (isPrimitive(target) || isPrimitive(source)) {
         return source;
@@ -1031,10 +1083,10 @@ function createFormControl(props = {}) {
         errors: false,
     };
     const _subjects = {
-        watch: new Subject(),
-        control: new Subject(),
-        array: new Subject(),
-        state: new Subject(),
+        watch: createSubject(),
+        control: createSubject(),
+        array: createSubject(),
+        state: createSubject(),
     };
     const validationModeBeforeSubmit = getValidationModes(_options.mode);
     const validationModeAfterSubmit = getValidationModes(_options.reValidateMode);
@@ -1051,7 +1103,7 @@ function createFormControl(props = {}) {
         let isValid = false;
         if (_proxyFormState.isValid) {
             isValid = _options.resolver
-                ? isEmptyObject((await executeResolver()).errors)
+                ? isEmptyObject((await _executeSchema()).errors)
                 : await executeBuildInValidation(_fields, true);
             if (!shouldSkipRender && isValid !== _formState.isValid) {
                 _formState.isValid = isValid;
@@ -1170,11 +1222,11 @@ function createFormControl(props = {}) {
             validateFields = {};
         }
     };
-    const executeResolver = async (name) => _options.resolver
+    const _executeSchema = async (name) => _options.resolver
         ? await _options.resolver(Object.assign({}, _formValues), _options.context, getResolverOptions(name || _names.mount, _fields, _options.criteriaMode, _options.shouldUseNativeValidation))
         : {};
-    const executeResolverValidation = async (names) => {
-        const { errors } = await executeResolver();
+    const executeSchemaAndUpdateState = async (names) => {
+        const { errors } = await _executeSchema();
         if (names) {
             for (const name of names) {
                 const error = get(errors, name);
@@ -1257,7 +1309,10 @@ function createFormControl(props = {}) {
                     isWeb && isHTMLElement(fieldReference.ref) && isNullOrUndefined(value)
                         ? ''
                         : value;
-                if (isMultipleSelect(fieldReference.ref)) {
+                if (isFileInput(fieldReference.ref) && !isString(fieldValue)) {
+                    fieldReference.ref.files = fieldValue;
+                }
+                else if (isMultipleSelect(fieldReference.ref)) {
                     [...fieldReference.ref.options].forEach((selectRef) => (selectRef.selected = fieldValue.includes(selectRef.value)));
                 }
                 else if (fieldReference.refs) {
@@ -1368,18 +1423,11 @@ function createFormControl(props = {}) {
                     isValidating: true,
                 });
             if (_options.resolver) {
-                const { errors } = await executeResolver([name]);
-                error = get(errors, name);
-                if (isCheckBoxInput(target) && !error) {
-                    const parentNodeName = getNodeParentName(name);
-                    const parentField = get(_fields, parentNodeName);
-                    if (Array.isArray(parentField) &&
-                        parentField.every((field) => field._f && isCheckBoxInput(field._f.ref))) {
-                        const parentError = get(errors, parentNodeName, {});
-                        parentError.type && (error = parentError);
-                        name = parentNodeName;
-                    }
-                }
+                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);
             }
             else {
@@ -1398,7 +1446,7 @@ function createFormControl(props = {}) {
             isValidating: true,
         });
         if (_options.resolver) {
-            const errors = await executeResolverValidation(isUndefined(name) ? name : fieldNames);
+            const errors = await executeSchemaAndUpdateState(isUndefined(name) ? name : fieldNames);
             isValid = isEmptyObject(errors);
             validationResult = name
                 ? !fieldNames.some((name) => get(errors, name))
@@ -1414,7 +1462,10 @@ function createFormControl(props = {}) {
         else {
             validationResult = isValid = await executeBuildInValidation(_fields);
         }
-        _subjects.state.next(Object.assign(Object.assign({}, (!isString(name) || isValid !== _formState.isValid ? {} : { name })), { errors: _formState.errors, isValid, isValidating: false }));
+        _subjects.state.next(Object.assign(Object.assign(Object.assign({}, (!isString(name) ||
+            (_proxyFormState.isValid && isValid !== _formState.isValid)
+            ? {}
+            : { name })), (_options.resolver ? { isValid } : {})), { errors: _formState.errors, isValidating: false }));
         options.shouldFocus &&
             !validationResult &&
             focusFieldBy(_fields, (key) => get(_formState.errors, key), name ? fieldNames : _names.mount);
@@ -1434,6 +1485,7 @@ function createFormControl(props = {}) {
             : (_formState.errors = {});
         _subjects.state.next({
             errors: _formState.errors,
+            isValid: true,
         });
     };
     const setError = (name, error, options) => {
@@ -1540,7 +1592,7 @@ function createFormControl(props = {}) {
         });
         try {
             if (_options.resolver) {
-                const { errors, values } = await executeResolver();
+                const { errors, values } = await _executeSchema();
                 _formState.errors = errors;
                 fieldValues = values;
             }
@@ -1602,7 +1654,7 @@ function createFormControl(props = {}) {
             }
             _formValues = props.shouldUnregister
                 ? keepStateOptions.keepDefaultValues
-                    ? _defaultValues
+                    ? cloneObject(_defaultValues)
                     : {}
                 : cloneUpdatedValues;
             _fields = {};
@@ -1660,6 +1712,7 @@ function createFormControl(props = {}) {
         control: {
             register,
             unregister,
+            _executeSchema,
             _getWatch,
             _getDirty,
             _updateValid,
@@ -1766,6 +1819,7 @@ function useForm(props = {}) {
         }
         control._removeUnmounted();
     });
+    React.useEffect(() => () => Object.values(control._subjects).forEach((subject) => subject.unsubscribe()), [control]);
     _formControl.current.formState = getProxyFormState(formState, control._proxyFormState);
     return _formControl.current;
 }