react-hook-form 7.17.1 → 7.17.5

package/dist/index.esm.js

@@ -101,29 +101,41 @@ var shouldRenderFormState = (formStateData, _proxyFormState, isRoot) => {
             (!isRoot || VALIDATION_MODE.all)));
 };
 
-var convertToArrayPayload = (value) => Array.isArray(value) ? value : [value];
-
-function useSubscribe({ disabled, subject, callback }) {
-    const _subscription = React.useRef(subject);
-    const _unSubscribe = React.useRef();
-    if (disabled) {
-        if (_subscription.current) {
-            _unSubscribe.current && _unSubscribe.current.unsubscribe();
-            _subscription.current = _unSubscribe.current = undefined;
-        }
+var convertToArrayPayload = (value) => (Array.isArray(value) ? value : [value]);
+
+var shouldSubscribeByName = (name, signalName) => !name ||
+    !signalName ||
+    convertToArrayPayload(name).some((currentName) => currentName &&
+        (currentName.startsWith(signalName) ||
+            signalName.startsWith(currentName)));
+
+const tearDown = (_unsubscribe) => {
+    if (_unsubscribe.current) {
+        _unsubscribe.current.unsubscribe();
+        _unsubscribe.current = undefined;
     }
-    else {
-        if (!_subscription.current) {
-            _subscription.current = subject;
-        }
-        if (!_unSubscribe.current && _subscription.current) {
-            _unSubscribe.current = _subscription.current.subscribe({
-                next: callback,
-            });
-        }
+};
+const updateSubscriptionProps = ({ _unsubscribe, props }) => () => {
+    if (props.disabled) {
+        tearDown(_unsubscribe);
+    }
+    else if (!_unsubscribe.current) {
+        _unsubscribe.current = props.subject.subscribe({
+            next: props.callback,
+        });
     }
-    React.useEffect(() => () => {
-        _unSubscribe.current && _unSubscribe.current.unsubscribe();
+};
+function useSubscribe(props) {
+    const _unsubscribe = React.useRef();
+    const _updateSubscription = React.useRef(() => { });
+    _updateSubscription.current = updateSubscriptionProps({
+        _unsubscribe,
+        props,
+    });
+    !props.skipEarlySubscription && _updateSubscription.current();
+    React.useEffect(() => {
+        _updateSubscription.current();
+        return () => tearDown(_unsubscribe);
     }, []);
 }
 
@@ -143,12 +155,11 @@ function useFormState(props) {
     _name.current = name;
     useSubscribe({
         disabled,
-        callback: (formState) => (!_name.current ||
-            !formState.name ||
-            convertToArrayPayload(_name.current).includes(formState.name)) &&
+        callback: (formState) => shouldSubscribeByName(_name.current, formState.name) &&
             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);
 }
@@ -166,7 +177,7 @@ function useController(props) {
     useSubscribe({
         subject: control._subjects.control,
         callback: (data) => (!data.name || _name.current === data.name) &&
-            setInputStateValue(get(data.values, name)),
+            setInputStateValue(get(data.values, _name.current)),
     });
     const registerProps = control.register(name, Object.assign(Object.assign({}, props.rules), { value }));
     const updateMounted = React.useCallback((name, value) => {
@@ -366,15 +377,18 @@ const useFieldArray = (props) => {
     const { control = methods.control, name, keyName = 'id', shouldUnregister, } = props;
     const [fields, setFields] = React.useState(mapIds(control._getFieldArray(name), keyName));
     const _fieldIds = React.useRef(fields);
+    const _name = React.useRef(name);
+    _name.current = name;
     _fieldIds.current = fields;
     control._names.array.add(name);
     useSubscribe({
         callback: ({ values, name: fieldArrayName }) => {
-            if (fieldArrayName === name || !fieldArrayName) {
-                setFields(mapIds(get(values, name), keyName));
+            if (fieldArrayName === _name.current || !fieldArrayName) {
+                setFields(mapIds(get(values, _name.current), keyName));
             }
         },
         subject: control._subjects.array,
+        skipEarlySubscription: true,
     });
     const updateValues = React.useCallback((updatedFieldArrayValuesWithKey) => {
         const updatedFieldArrayValues = omitKeys(updatedFieldArrayValuesWithKey, keyName);
@@ -483,6 +497,8 @@ const useFieldArray = (props) => {
     };
 };
 
+var isFunction = (value) => typeof value === 'function';
+
 function cloneObject(data) {
     let copy;
     const isArray = Array.isArray(data);
@@ -495,6 +511,10 @@ function cloneObject(data) {
     else if (isArray || isObject(data)) {
         copy = isArray ? [] : {};
         for (const key in data) {
+            if (isFunction(data[key])) {
+                copy = data;
+                break;
+            }
             copy[key] = cloneObject(data[key]);
         }
     }
@@ -547,8 +567,6 @@ var getValidationModes = (mode) => ({
 
 var isBoolean = (value) => typeof value === 'boolean';
 
-var isFunction = (value) => typeof value === 'function';
-
 var isHTMLElement = (value) => value instanceof HTMLElement;
 
 var isMultipleSelect = (element) => element.type === `select-multiple`;
@@ -563,7 +581,7 @@ var isWeb = typeof window !== 'undefined' &&
     typeof window.HTMLElement !== 'undefined' &&
     typeof document !== 'undefined';
 
-var live = (ref) => !isHTMLElement(ref) || !document.contains(ref);
+var live = (ref) => isHTMLElement(ref) && document.contains(ref);
 
 class Subscription {
     constructor() {
@@ -1203,7 +1221,9 @@ function createFormControl(props = {}) {
         for (const name of _names.unMount) {
             const field = get(_fields, name);
             field &&
-                (field._f.refs ? field._f.refs.every(live) : live(field._f.ref)) &&
+                (field._f.refs
+                    ? field._f.refs.every((ref) => !live(ref))
+                    : !live(field._f.ref)) &&
                 unregister(name);
         }
         _names.unMount = new Set();
@@ -1226,7 +1246,7 @@ function createFormControl(props = {}) {
         isGlobal && (_names.watchAll = true);
         return fieldValues;
     };
-    const _getFieldArray = (name) => get(_stateFlags.mount ? _formValues : _defaultValues, name, []);
+    const _getFieldArray = (name) => get(_stateFlags.mount ? _formValues : _defaultValues, name, props.shouldUnregister ? get(_defaultValues, name, []) : []);
     const setFieldValue = (name, value, options = {}, shouldRender) => {
         const field = get(_fields, name);
         let fieldValue = value;
@@ -1324,8 +1344,8 @@ function createFormControl(props = {}) {
                 !field._f.deps) ||
                 skipValidation(isBlurEvent, get(_formState.touchedFields, name), _formState.isSubmitted, validationModeAfterSubmit, validationModeBeforeSubmit);
             const isWatched = isFieldWatched(name, isBlurEvent);
-            if (isBlurEvent && field._f.onBlur) {
-                field._f.onBlur(event);
+            if (isBlurEvent) {
+                field._f.onBlur && field._f.onBlur(event);
             }
             else if (field._f.onChange) {
                 field._f.onChange(event);
@@ -1415,6 +1435,7 @@ function createFormControl(props = {}) {
             : (_formState.errors = {});
         _subjects.state.next({
             errors: _formState.errors,
+            isValid: true,
         });
     };
     const setError = (name, error, options) => {
@@ -1489,7 +1510,7 @@ function createFormControl(props = {}) {
                         field = {
                             _f: isRadioOrCheckbox
                                 ? Object.assign(Object.assign({}, field._f), { refs: [
-                                        ...compact(field._f.refs || []).filter((ref) => isHTMLElement(ref) && document.contains(ref)),
+                                        ...compact(field._f.refs || []).filter(live),
                                         fieldRef,
                                     ], ref: { type: fieldRef.type, name } }) : Object.assign(Object.assign({}, field._f), { ref: fieldRef }),
                         };
@@ -1558,10 +1579,13 @@ function createFormControl(props = {}) {
         }
     };
     const reset = (formValues, keepStateOptions = {}) => {
+        const hasUpdatedFormValues = !isEmptyObject(formValues);
         const updatedValues = formValues || _defaultValues;
         const cloneUpdatedValues = cloneObject(updatedValues);
+        if (!keepStateOptions.keepDefaultValues) {
+            _defaultValues = updatedValues;
+        }
         if (!keepStateOptions.keepValues) {
-            _formValues = props.shouldUnregister ? {} : cloneUpdatedValues;
             if (isWeb) {
                 for (const name of _names.mount) {
                     const field = get(_fields, name);
@@ -1578,16 +1602,14 @@ function createFormControl(props = {}) {
                     }
                 }
             }
-        }
-        if (!keepStateOptions.keepDefaultValues) {
-            _defaultValues = Object.assign({}, updatedValues);
-        }
-        if (!keepStateOptions.keepValues) {
+            _formValues = props.shouldUnregister
+                ? keepStateOptions.keepDefaultValues
+                    ? _defaultValues
+                    : {}
+                : cloneUpdatedValues;
             _fields = {};
             _subjects.control.next({
-                values: keepStateOptions.keepDefaultValues
-                    ? _defaultValues
-                    : Object.assign({}, updatedValues),
+                values: hasUpdatedFormValues ? cloneUpdatedValues : _defaultValues,
             });
             _subjects.watch.next({});
             _subjects.array.next({
@@ -1609,14 +1631,16 @@ function createFormControl(props = {}) {
             isDirty: keepStateOptions.keepDirty
                 ? _formState.isDirty
                 : keepStateOptions.keepDefaultValues
-                    ? deepEqual(formValues, _defaultValues)
+                    ? !deepEqual(formValues, _defaultValues)
                     : false,
             isSubmitted: keepStateOptions.keepIsSubmitted
                 ? _formState.isSubmitted
                 : false,
             dirtyFields: keepStateOptions.keepDirty
                 ? _formState.dirtyFields
-                : {},
+                : (keepStateOptions.keepDefaultValues && formValues
+                    ? Object.entries(formValues).reduce((previous, [key, value]) => (Object.assign(Object.assign({}, previous), { [key]: value !== get(_defaultValues, key) })), {})
+                    : {}),
             touchedFields: keepStateOptions.keepTouched
                 ? _formState.touchedFields
                 : {},
@@ -1630,7 +1654,10 @@ function createFormControl(props = {}) {
             !_proxyFormState.isValid || !!keepStateOptions.keepIsValid;
         _stateFlags.watch = !!props.shouldUnregister;
     };
-    const setFocus = (name) => get(_fields, name)._f.ref.focus();
+    const setFocus = (name) => {
+        const field = get(_fields, name)._f;
+        (field.ref.focus ? field.ref : field.refs[0]).focus();
+    };
     return {
         control: {
             register,
@@ -1753,13 +1780,8 @@ function useWatch(props) {
     useSubscribe({
         disabled,
         subject: control._subjects.watch,
-        callback: ({ name }) => {
-            if (!_name.current ||
-                !name ||
-                convertToArrayPayload(_name.current).some((currentName) => name &&
-                    currentName &&
-                    (name.startsWith(currentName) ||
-                        currentName.startsWith(name)))) {
+        callback: (formState) => {
+            if (shouldSubscribeByName(_name.current, formState.name)) {
                 control._stateFlags.mount = true;
                 const fieldValues = control._getWatch(_name.current, defaultValue);
                 updateValue(isObject(fieldValues)