react-hook-form 7.23.0 → 7.25.0

package/dist/index.esm.mjs

@@ -231,9 +231,7 @@ function useController(props) {
         control,
         name,
     });
-    const _name = React.useRef(name);
-    _name.current = name;
-    const registerProps = control.register(name, Object.assign(Object.assign({}, props.rules), { value }));
+    const _registerProps = React.useRef(control.register(name, Object.assign(Object.assign({}, props.rules), { value })));
     React.useEffect(() => {
         const updateMounted = (name, value) => {
             const field = get(control._fields, name);
@@ -244,36 +242,36 @@ function useController(props) {
         updateMounted(name, true);
         return () => {
             const _shouldUnregisterField = control._options.shouldUnregister || shouldUnregister;
-            isArrayField
+            (isArrayField
                 ? _shouldUnregisterField && !control._stateFlags.action
-                : _shouldUnregisterField
-                    ? control.unregister(name)
-                    : updateMounted(name, false);
+                : _shouldUnregisterField)
+                ? control.unregister(name)
+                : updateMounted(name, false);
         };
     }, [name, control, isArrayField, shouldUnregister]);
     return {
         field: {
-            onChange: (event) => {
-                registerProps.onChange({
+            name,
+            value,
+            onChange: React.useCallback((event) => {
+                _registerProps.current.onChange({
                     target: {
                         value: getEventValue(event),
                         name: name,
                     },
                     type: EVENTS.CHANGE,
                 });
-            },
-            onBlur: () => {
-                registerProps.onBlur({
+            }, [name]),
+            onBlur: React.useCallback(() => {
+                _registerProps.current.onBlur({
                     target: {
                         value: get(control._formValues, name),
                         name: name,
                     },
                     type: EVENTS.BLUR,
                 });
-            },
-            name,
-            value,
-            ref: (elm) => {
+            }, [name, control]),
+            ref: React.useCallback((elm) => {
                 const field = get(control._fields, name);
                 if (elm && field && elm.focus) {
                     field._f.ref = {
@@ -282,15 +280,10 @@ function useController(props) {
                         reportValidity: () => elm.reportValidity(),
                     };
                 }
-            },
+            }, [name, control]),
         },
         formState,
-        fieldState: {
-            invalid: !!get(formState.errors, name),
-            isDirty: !!get(formState.dirtyFields, name),
-            isTouched: !!get(formState.touchedFields, name),
-            error: get(formState.errors, name),
-        },
+        fieldState: control.getFieldState(name, formState),
     };
 }
 
@@ -1189,7 +1182,7 @@ function createFormControl(props = {}) {
             _stateFlags.mount && _updateValid();
         }
     };
-    const updateTouchAndDirty = (name, fieldValue, isCurrentTouched, shouldRender = true) => {
+    const updateTouchAndDirty = (name, fieldValue, isBlurEvent, shouldDirty, shouldRender) => {
         let isFieldDirty = false;
         const output = {
             name,
@@ -1200,7 +1193,7 @@ function createFormControl(props = {}) {
             _formState.isDirty = output.isDirty = _getDirty();
             isFieldDirty = isPreviousFormDirty !== output.isDirty;
         }
-        if (_proxyFormState.dirtyFields && !isCurrentTouched) {
+        if (_proxyFormState.dirtyFields && (!isBlurEvent || shouldDirty)) {
             const isPreviousFieldDirty = get(_formState.dirtyFields, name);
             const isCurrentFieldPristine = deepEqual(get(_defaultValues, name), fieldValue);
             isCurrentFieldPristine
@@ -1211,13 +1204,13 @@ function createFormControl(props = {}) {
                 isFieldDirty ||
                     isPreviousFieldDirty !== get(_formState.dirtyFields, name);
         }
-        if (isCurrentTouched && !isPreviousFieldTouched) {
-            set(_formState.touchedFields, name, isCurrentTouched);
+        if (isBlurEvent && !isPreviousFieldTouched) {
+            set(_formState.touchedFields, name, isBlurEvent);
             output.touchedFields = _formState.touchedFields;
             isFieldDirty =
                 isFieldDirty ||
                     (_proxyFormState.touchedFields &&
-                        isPreviousFieldTouched !== isCurrentTouched);
+                        isPreviousFieldTouched !== isBlurEvent);
         }
         isFieldDirty && shouldRender && _subjects.state.next(output);
         return isFieldDirty ? output : {};
@@ -1361,7 +1354,7 @@ function createFormControl(props = {}) {
             }
         }
         (options.shouldDirty || options.shouldTouch) &&
-            updateTouchAndDirty(name, fieldValue, options.shouldTouch);
+            updateTouchAndDirty(name, fieldValue, options.shouldTouch, options.shouldDirty, true);
         options.shouldValidate && trigger(name);
     };
     const setValues = (name, value, options) => {
@@ -1380,7 +1373,8 @@ function createFormControl(props = {}) {
     const setValue = (name, value, options = {}) => {
         const field = get(_fields, name);
         const isFieldArray = _names.array.has(name);
-        set(_formValues, name, value);
+        const cloneValue = cloneObject(value);
+        set(_formValues, name, cloneValue);
         if (isFieldArray) {
             _subjects.array.next({
                 name,
@@ -1392,14 +1386,14 @@ function createFormControl(props = {}) {
                 _subjects.state.next({
                     name,
                     dirtyFields: _formState.dirtyFields,
-                    isDirty: _getDirty(name, value),
+                    isDirty: _getDirty(name, cloneValue),
                 });
             }
         }
         else {
-            field && !field._f && !isNullOrUndefined(value)
-                ? setValues(name, value, options)
-                : setFieldValue(name, value, options);
+            field && !field._f && !isNullOrUndefined(cloneValue)
+                ? setValues(name, cloneValue, options)
+                : setFieldValue(name, cloneValue, options);
         }
         isWatched(name, _names) && _subjects.state.next({});
         _subjects.watch.next({
@@ -1423,13 +1417,13 @@ function createFormControl(props = {}) {
                 !field._f.deps) ||
                 skipValidation(isBlurEvent, get(_formState.touchedFields, name), _formState.isSubmitted, validationModeAfterSubmit, validationModeBeforeSubmit);
             const watched = isWatched(name, _names, isBlurEvent);
+            set(_formValues, name, fieldValue);
             if (isBlurEvent) {
                 field._f.onBlur && field._f.onBlur(event);
             }
             else if (field._f.onChange) {
                 field._f.onChange(event);
             }
-            set(_formValues, name, fieldValue);
             const fieldState = updateTouchAndDirty(name, fieldValue, isBlurEvent, false);
             const shouldRender = !isEmptyObject(fieldState) || watched;
             !isBlurEvent &&
@@ -1504,6 +1498,12 @@ function createFormControl(props = {}) {
                 ? get(values, fieldNames)
                 : fieldNames.map((name) => get(values, name));
     };
+    const getFieldState = (name, formState) => ({
+        invalid: !!get((formState || _formState).errors, name),
+        isDirty: !!get((formState || _formState).dirtyFields, name),
+        isTouched: !!get((formState || _formState).touchedFields, name),
+        error: get((formState || _formState).errors, name),
+    });
     const clearErrors = (name) => {
         name
             ? convertToArrayPayload(name).forEach((inputName) => unset(_formState.errors, inputName))
@@ -1659,27 +1659,29 @@ function createFormControl(props = {}) {
         }
     };
     const resetField = (name, options = {}) => {
-        if (isUndefined(options.defaultValue)) {
-            setValue(name, get(_defaultValues, name));
-        }
-        else {
-            setValue(name, options.defaultValue);
-            set(_defaultValues, name, options.defaultValue);
-        }
-        if (!options.keepTouched) {
-            unset(_formState.touchedFields, name);
-        }
-        if (!options.keepDirty) {
-            unset(_formState.dirtyFields, name);
-            _formState.isDirty = options.defaultValue
-                ? _getDirty(name, get(_defaultValues, name))
-                : _getDirty();
-        }
-        if (!options.keepError) {
-            unset(_formState.errors, name);
-            _proxyFormState.isValid && _updateValid();
+        if (get(_fields, name)) {
+            if (isUndefined(options.defaultValue)) {
+                setValue(name, get(_defaultValues, name));
+            }
+            else {
+                setValue(name, options.defaultValue);
+                set(_defaultValues, name, options.defaultValue);
+            }
+            if (!options.keepTouched) {
+                unset(_formState.touchedFields, name);
+            }
+            if (!options.keepDirty) {
+                unset(_formState.dirtyFields, name);
+                _formState.isDirty = options.defaultValue
+                    ? _getDirty(name, get(_defaultValues, name))
+                    : _getDirty();
+            }
+            if (!options.keepError) {
+                unset(_formState.errors, name);
+                _proxyFormState.isValid && _updateValid();
+            }
+            _subjects.state.next(Object.assign({}, _formState));
         }
-        _subjects.state.next(Object.assign({}, _formState));
     };
     const reset = (formValues, keepStateOptions = {}) => {
         const updatedValues = formValues || _defaultValues;
@@ -1766,6 +1768,7 @@ function createFormControl(props = {}) {
         control: {
             register,
             unregister,
+            getFieldState,
             _executeSchema,
             _getWatch,
             _getDirty,
@@ -1830,6 +1833,7 @@ function createFormControl(props = {}) {
         unregister,
         setError,
         setFocus,
+        getFieldState,
     };
 }