react-hook-form 7.36.1 → 7.37.0

package/dist/index.esm.mjs

@@ -127,14 +127,16 @@ const FormProvider = (props) => {
     return (React.createElement(HookFormContext.Provider, { value: data }, children));
 };
 
-var getProxyFormState = (formState, _proxyFormState, localProxyFormState, isRoot = true) => {
-    const result = {};
+var getProxyFormState = (formState, control, localProxyFormState, isRoot = true) => {
+    const result = {
+        defaultValues: control._defaultValues,
+    };
     for (const key in formState) {
         Object.defineProperty(result, key, {
             get: () => {
                 const _key = key;
-                if (_proxyFormState[_key] !== VALIDATION_MODE.all) {
-                    _proxyFormState[_key] = !isRoot || VALIDATION_MODE.all;
+                if (control._proxyFormState[_key] !== VALIDATION_MODE.all) {
+                    control._proxyFormState[_key] = !isRoot || VALIDATION_MODE.all;
                 }
                 localProxyFormState && (localProxyFormState[_key] = true);
                 return formState[_key];
@@ -169,16 +171,13 @@ function useSubscribe(props) {
     const _props = React.useRef(props);
     _props.current = props;
     React.useEffect(() => {
-        const tearDown = (subscription) => {
-            if (subscription) {
-                subscription.unsubscribe();
-            }
-        };
         const subscription = !props.disabled &&
             _props.current.subject.subscribe({
                 next: _props.current.callback,
             });
-        return () => tearDown(subscription);
+        return () => {
+            subscription && subscription.unsubscribe();
+        };
     }, [props.disabled]);
 }
 
@@ -216,6 +215,7 @@ function useFormState(props) {
     const methods = useFormContext();
     const { control = methods.control, disabled, name, exact } = props || {};
     const [formState, updateFormState] = React.useState(control._formState);
+    const _mounted = React.useRef(true);
     const _localProxyFormState = React.useRef({
         isDirty: false,
         dirtyFields: false,
@@ -225,18 +225,16 @@ function useFormState(props) {
         errors: false,
     });
     const _name = React.useRef(name);
-    const _mounted = React.useRef(true);
     _name.current = name;
-    const callback = React.useCallback((value) => _mounted.current &&
-        shouldSubscribeByName(_name.current, value.name, exact) &&
-        shouldRenderFormState(value, _localProxyFormState.current) &&
-        updateFormState({
-            ...control._formState,
-            ...value,
-        }), [control, exact]);
     useSubscribe({
         disabled,
-        callback,
+        callback: React.useCallback((value) => _mounted.current &&
+            shouldSubscribeByName(_name.current, value.name, exact) &&
+            shouldRenderFormState(value, _localProxyFormState.current) &&
+            updateFormState({
+                ...control._formState,
+                ...value,
+            }), [control, exact]),
         subject: control._subjects.state,
     });
     React.useEffect(() => {
@@ -245,7 +243,7 @@ function useFormState(props) {
             _mounted.current = false;
         };
     }, []);
-    return getProxyFormState(formState, control._proxyFormState, _localProxyFormState.current, false);
+    return getProxyFormState(formState, control, _localProxyFormState.current, false);
 }
 
 var isString = (value) => typeof value === 'string';
@@ -296,30 +294,27 @@ function useWatch(props) {
     const { control = methods.control, name, defaultValue, disabled, exact, } = props || {};
     const _name = React.useRef(name);
     _name.current = name;
-    const callback = React.useCallback((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);
-        }
-    }, [control, exact, defaultValue]);
     useSubscribe({
         disabled,
         subject: control._subjects.watch,
-        callback,
+        callback: React.useCallback((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);
+            }
+        }, [control, exact, defaultValue]),
     });
     const [value, updateValue] = React.useState(isUndefined(defaultValue)
         ? control._getWatch(name)
         : defaultValue);
-    React.useEffect(() => {
-        control._removeUnmounted();
-    });
+    React.useEffect(() => control._removeUnmounted());
     return value;
 }
 
@@ -386,27 +381,23 @@ function useController(props) {
         field: {
             name,
             value,
-            onChange: React.useCallback((event) => {
-                _registerProps.current.onChange({
-                    target: {
-                        value: getEventValue(event),
-                        name: name,
-                    },
-                    type: EVENTS.CHANGE,
-                });
-            }, [name]),
-            onBlur: React.useCallback(() => {
-                _registerProps.current.onBlur({
-                    target: {
-                        value: get(control._formValues, name),
-                        name: name,
-                    },
-                    type: EVENTS.BLUR,
-                });
-            }, [name, control]),
-            ref: React.useCallback((elm) => {
+            onChange: React.useCallback((event) => _registerProps.current.onChange({
+                target: {
+                    value: getEventValue(event),
+                    name: name,
+                },
+                type: EVENTS.CHANGE,
+            }), [name]),
+            onBlur: React.useCallback(() => _registerProps.current.onBlur({
+                target: {
+                    value: get(control._formValues, name),
+                    name: name,
+                },
+                type: EVENTS.BLUR,
+            }), [name, control]),
+            ref: (elm) => {
                 const field = get(control._fields, name);
-                if (elm && field && elm.focus) {
+                if (field && elm) {
                     field._f.ref = {
                         focus: () => elm.focus(),
                         select: () => elm.select(),
@@ -414,7 +405,7 @@ function useController(props) {
                         reportValidity: () => elm.reportValidity(),
                     };
                 }
-            }, [name, control._fields]),
+            },
         },
         formState,
         fieldState: Object.defineProperties({}, {
@@ -525,10 +516,11 @@ const focusFieldBy = (fields, callback, fieldsNames) => {
         if (field) {
             const { _f, ...currentField } = field;
             if (_f && callback(_f.name)) {
-                if (_f.ref.focus && isUndefined(_f.ref.focus())) {
+                if (_f.ref.focus) {
+                    _f.ref.focus();
                     break;
                 }
-                else if (_f.refs) {
+                else if (_f.refs && _f.refs[0].focus) {
                     _f.refs[0].focus();
                     break;
                 }
@@ -801,6 +793,11 @@ 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';
@@ -817,12 +814,13 @@ function cloneObject(data) {
     else if (!(isWeb && (data instanceof Blob || data instanceof FileList)) &&
         (isArray || isObject(data))) {
         copy = isArray ? [] : {};
-        for (const key in data) {
-            if (isFunction(data[key])) {
-                copy = data;
-                break;
+        if (!Array.isArray(data) && !isPlainObject(data)) {
+            copy = data;
+        }
+        else {
+            for (const key in data) {
+                copy[key] = cloneObject(data[key]);
             }
-            copy[key] = cloneObject(data[key]);
         }
     }
     else {
@@ -1083,7 +1081,9 @@ function useFieldArray(props) {
     React.useEffect(() => {
         control._stateFlags.action = false;
         isWatched(name, control._names) && control._subjects.state.next({});
-        if (_actioned.current) {
+        if (_actioned.current &&
+            (!getValidationModes(control._options.mode).isOnSubmit ||
+                control._formState.isSubmitted)) {
             if (control._options.resolver) {
                 control._executeSchema([name]).then((result) => {
                     const error = get(result.errors, name);
@@ -1100,11 +1100,7 @@ function useFieldArray(props) {
             }
             else {
                 const field = get(control._fields, name);
-                const validationModeBeforeSubmit = getValidationModes(control._options.mode);
-                if ((!validationModeBeforeSubmit.isOnSubmit ||
-                    control._formState.isSubmitted) &&
-                    field &&
-                    field._f) {
+                if (field && field._f) {
                     validateField(field, get(control._formValues, name), control._options.criteriaMode === VALIDATION_MODE.all, control._options.shouldUseNativeValidation, true).then((error) => !isEmptyObject(error) &&
                         control._subjects.state.next({
                             errors: updateFieldArrayRootError(control._formState.errors, error, name),
@@ -1383,15 +1379,15 @@ function createFormControl(props = {}) {
         ...props,
     };
     let _formState = {
+        submitCount: 0,
         isDirty: false,
         isValidating: false,
-        dirtyFields: {},
         isSubmitted: false,
-        submitCount: 0,
-        touchedFields: {},
         isSubmitting: false,
         isSubmitSuccessful: false,
         isValid: false,
+        touchedFields: {},
+        dirtyFields: {},
         errors: {},
     };
     let _fields = {};
@@ -1657,7 +1653,7 @@ function createFormControl(props = {}) {
                         ? ''
                         : value;
                 if (isMultipleSelect(fieldReference.ref)) {
-                    [...fieldReference.ref.options].forEach((selectRef) => (selectRef.selected = fieldValue.includes(selectRef.value)));
+                    [...fieldReference.ref.options].forEach((optionRef) => (optionRef.selected = fieldValue.includes(optionRef.value)));
                 }
                 else if (fieldReference.refs) {
                     if (isCheckBoxInput(fieldReference.ref)) {
@@ -2130,9 +2126,7 @@ function createFormControl(props = {}) {
             touchedFields: keepStateOptions.keepTouched
                 ? _formState.touchedFields
                 : {},
-            errors: keepStateOptions.keepErrors
-                ? _formState.errors
-                : {},
+            errors: keepStateOptions.keepErrors ? _formState.errors : {},
             isSubmitting: false,
             isSubmitSuccessful: false,
         });
@@ -2147,8 +2141,10 @@ function createFormControl(props = {}) {
             const fieldRef = fieldReference.refs
                 ? fieldReference.refs[0]
                 : fieldReference.ref;
-            fieldRef.focus();
-            options.shouldSelect && fieldRef.select();
+            if (fieldRef.focus) {
+                fieldRef.focus();
+                options.shouldSelect && fieldRef.select();
+            }
         }
     };
     return {
@@ -2252,37 +2248,35 @@ function useForm(props = {}) {
     const [formState, updateFormState] = React.useState({
         isDirty: false,
         isValidating: false,
-        dirtyFields: {},
         isSubmitted: false,
-        submitCount: 0,
-        touchedFields: {},
         isSubmitting: false,
         isSubmitSuccessful: false,
         isValid: false,
+        submitCount: 0,
+        dirtyFields: {},
+        touchedFields: {},
         errors: {},
+        defaultValues: props.defaultValues,
     });
-    if (_formControl.current) {
-        _formControl.current.control._options = props;
-    }
-    else {
+    if (!_formControl.current) {
         _formControl.current = {
             ...createFormControl(props),
             formState,
         };
     }
     const control = _formControl.current.control;
-    const callback = React.useCallback((value) => {
-        if (shouldRenderFormState(value, control._proxyFormState, true)) {
-            control._formState = {
-                ...control._formState,
-                ...value,
-            };
-            updateFormState({ ...control._formState });
-        }
-    }, [control]);
+    control._options = props;
     useSubscribe({
         subject: control._subjects.state,
-        callback,
+        callback: React.useCallback((value) => {
+            if (shouldRenderFormState(value, control._proxyFormState, true)) {
+                control._formState = {
+                    ...control._formState,
+                    ...value,
+                };
+                updateFormState({ ...control._formState });
+            }
+        }, [control]),
     });
     React.useEffect(() => {
         if (!control._stateFlags.mount) {
@@ -2295,7 +2289,7 @@ function useForm(props = {}) {
         }
         control._removeUnmounted();
     });
-    _formControl.current.formState = getProxyFormState(formState, control._proxyFormState);
+    _formControl.current.formState = getProxyFormState(formState, control);
     return _formControl.current;
 }