react-hook-form 7.23.0 → 7.24.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);
@@ -253,27 +251,27 @@ function useController(props) {
     }, [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,7 +280,7 @@ function useController(props) {
                         reportValidity: () => elm.reportValidity(),
                     };
                 }
-            },
+            }, [name, control]),
         },
         formState,
         fieldState: {
@@ -1189,7 +1187,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 +1198,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 +1209,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 +1359,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) => {
@@ -1423,13 +1421,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 &&
@@ -1659,27 +1657,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;