react-hook-form 7.55.0-next.1 → 7.55.0-next.3

package/dist/index.esm.mjs

@@ -106,7 +106,6 @@ var set = (object, path, value) => {
         object[key] = newValue;
         object = object[key];
     }
-    return object;
 };
 
 const EVENTS = {
@@ -323,7 +322,7 @@ function useWatch(props) {
         },
         exact,
         callback: (formState) => !disabled &&
-            updateValue(cloneObject(generateWatchOutput(_name.current, control._names, formState.values || control._formValues, false, defaultValue))),
+            updateValue(generateWatchOutput(_name.current, control._names, formState.values || control._formValues, false, defaultValue)),
     }), [control, defaultValue, disabled, exact]);
     const [value, updateValue] = React.useState(control._getWatch(name, defaultValue));
     React.useEffect(() => control._removeUnmounted());
@@ -369,6 +368,7 @@ function useController(props) {
         name,
         exact: true,
     });
+    const _props = React.useRef(props);
     const _registerProps = React.useRef(control.register(name, {
         ...props.rules,
         value,
@@ -396,47 +396,49 @@ function useController(props) {
             get: () => get(formState.errors, name),
         },
     }), [formState, name]);
+    const onChange = React.useCallback((event) => _registerProps.current.onChange({
+        target: {
+            value: getEventValue(event),
+            name: name,
+        },
+        type: EVENTS.CHANGE,
+    }), [name]);
+    const onBlur = React.useCallback(() => _registerProps.current.onBlur({
+        target: {
+            value: get(control._formValues, name),
+            name: name,
+        },
+        type: EVENTS.BLUR,
+    }), [name, control._formValues]);
+    const ref = React.useCallback((elm) => {
+        const field = get(control._fields, name);
+        if (field && elm) {
+            field._f.ref = {
+                focus: () => elm.focus(),
+                select: () => elm.select(),
+                setCustomValidity: (message) => elm.setCustomValidity(message),
+                reportValidity: () => elm.reportValidity(),
+            };
+        }
+    }, [control._fields, name]);
     const field = React.useMemo(() => ({
         name,
         value,
         ...(isBoolean(disabled) || formState.disabled
             ? { disabled: formState.disabled || disabled }
             : {}),
-        onChange: (event) => _registerProps.current.onChange({
-            target: {
-                value: getEventValue(event),
-                name: name,
-            },
-            type: EVENTS.CHANGE,
-        }),
-        onBlur: () => _registerProps.current.onBlur({
-            target: {
-                value: get(control._formValues, name),
-                name: name,
-            },
-            type: EVENTS.BLUR,
-        }),
-        ref: (elm) => {
-            const field = get(control._fields, name);
-            if (field && elm) {
-                field._f.ref = {
-                    focus: () => elm.focus(),
-                    select: () => elm.select(),
-                    setCustomValidity: (message) => elm.setCustomValidity(message),
-                    reportValidity: () => elm.reportValidity(),
-                };
-            }
-        },
-    }), [
-        name,
-        control._formValues,
-        disabled,
-        formState.disabled,
-        value,
-        control._fields,
-    ]);
+        onChange,
+        onBlur,
+        ref,
+    }), [name, disabled, formState.disabled, onChange, onBlur, ref, value]);
     React.useEffect(() => {
         const _shouldUnregisterField = control._options.shouldUnregister || shouldUnregister;
+        control.register(name, {
+            ..._props.current.rules,
+            ...(isBoolean(_props.current.disabled)
+                ? { disabled: _props.current.disabled }
+                : {}),
+        });
         const updateMounted = (name, value) => {
             const field = get(control._fields, name);
             if (field && field._f) {
@@ -463,7 +465,6 @@ function useController(props) {
     React.useEffect(() => {
         control._setDisabledField({
             disabled,
-            fields: control._fields,
             name,
         });
     }, [disabled, name, control]);
@@ -1411,18 +1412,15 @@ function createFormControl(props = {}) {
             name,
         };
         if (!_options.disabled) {
-            const disabledField = !!(get(_fields, name) &&
-                get(_fields, name)._f &&
-                get(_fields, name)._f.disabled);
             if (!isBlurEvent || shouldDirty) {
                 if (_proxyFormState.isDirty || _proxySubscribeFormState.isDirty) {
                     isPreviousDirty = _formState.isDirty;
                     _formState.isDirty = output.isDirty = _getDirty();
                     shouldUpdateField = isPreviousDirty !== output.isDirty;
                 }
-                const isCurrentFieldPristine = disabledField || deepEqual(get(_defaultValues, name), fieldValue);
-                isPreviousDirty = !!(!disabledField && get(_formState.dirtyFields, name));
-                isCurrentFieldPristine || disabledField
+                const isCurrentFieldPristine = deepEqual(get(_defaultValues, name), fieldValue);
+                isPreviousDirty = !!get(_formState.dirtyFields, name);
+                isCurrentFieldPristine
                     ? unset(_formState.dirtyFields, name)
                     : set(_formState.dirtyFields, name, true);
                 output.dirtyFields = _formState.dirtyFields;
@@ -1598,7 +1596,7 @@ function createFormControl(props = {}) {
                     if (!fieldReference.ref.type) {
                         _subjects.state.next({
                             name,
-                            values: { ..._formValues },
+                            values: cloneObject(_formValues),
                         });
                     }
                 }
@@ -1629,7 +1627,7 @@ function createFormControl(props = {}) {
         if (isFieldArray) {
             _subjects.array.next({
                 name,
-                values: { ..._formValues },
+                values: cloneObject(_formValues),
             });
             if ((_proxyFormState.isDirty ||
                 _proxyFormState.dirtyFields ||
@@ -1651,7 +1649,7 @@ function createFormControl(props = {}) {
         isWatched(name, _names) && _subjects.state.next({ ..._formState });
         _subjects.state.next({
             name: _state.mount ? name : undefined,
-            values: { ..._formValues },
+            values: cloneObject(_formValues),
         });
     };
     const onChange = async (event) => {
@@ -1693,7 +1691,7 @@ function createFormControl(props = {}) {
                 _subjects.state.next({
                     name,
                     type: event.type,
-                    values: { ..._formValues },
+                    values: cloneObject(_formValues),
                 });
             if (shouldSkipValidation) {
                 if (_proxyFormState.isValid || _proxySubscribeFormState.isValid) {
@@ -1834,7 +1832,7 @@ function createFormControl(props = {}) {
             if (shouldSubscribeByName(props.name, formState.name, props.exact) &&
                 shouldRenderFormState(formState, props.formState || _proxyFormState, _setFormState, props.reRenderRoot)) {
                 props.callback({
-                    values: _formValues,
+                    values: { ..._formValues },
                     ..._formState,
                     ...formState,
                 });
@@ -1870,7 +1868,7 @@ function createFormControl(props = {}) {
                 unset(_defaultValues, fieldName);
         }
         _subjects.state.next({
-            values: { ..._formValues },
+            values: cloneObject(_formValues),
         });
         _subjects.state.next({
             ..._formState,
@@ -1878,12 +1876,11 @@ function createFormControl(props = {}) {
         });
         !options.keepIsValid && _setValid();
     };
-    const _setDisabledField = ({ disabled, name, field, fields, }) => {
+    const _setDisabledField = ({ disabled, name, }) => {
         if ((isBoolean(disabled) && _state.mount) ||
             !!disabled ||
             _names.disabled.has(name)) {
             disabled ? _names.disabled.add(name) : _names.disabled.delete(name);
-            updateTouchAndDirty(name, getFieldValue(field ? field._f : get(fields, name)._f), false, false, true);
         }
     };
     const register = (name, options = {}) => {
@@ -1901,7 +1898,6 @@ function createFormControl(props = {}) {
         _names.mount.add(name);
         if (field) {
             _setDisabledField({
-                field,
                 disabled: isBoolean(options.disabled)
                     ? options.disabled
                     : _options.disabled,
@@ -2536,7 +2532,7 @@ function useFieldArray(props) {
         }
         control._subjects.state.next({
             name,
-            values: { ...control._formValues },
+            values: cloneObject(control._formValues),
         });
         control._names.focus &&
             iterateFieldsByAction(control._fields, (ref, key) => {