react-hook-form 7.23.0-next.1 → 7.24.2

package/dist/index.esm.mjs

@@ -142,8 +142,10 @@ function useFormState(props) {
         errors: false,
     });
     const _name = React.useRef(name);
+    const _mounted = React.useRef(true);
     _name.current = name;
-    const callback = React.useCallback((value) => shouldSubscribeByName(_name.current, value.name, exact) &&
+    const callback = React.useCallback((value) => _mounted.current &&
+        shouldSubscribeByName(_name.current, value.name, exact) &&
         shouldRenderFormState(value, _localProxyFormState.current) &&
         updateFormState(Object.assign(Object.assign({}, control._formState), value)), [control, exact]);
     useSubscribe({
@@ -151,6 +153,9 @@ function useFormState(props) {
         callback,
         subject: control._subjects.state,
     });
+    React.useEffect(() => () => {
+        _mounted.current = false;
+    }, []);
     return getProxyFormState(formState, control._proxyFormState, _localProxyFormState.current, false);
 }
 
@@ -226,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);
@@ -239,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 = {
@@ -277,7 +280,7 @@ function useController(props) {
                         reportValidity: () => elm.reportValidity(),
                     };
                 }
-            },
+            }, [name, control]),
         },
         formState,
         fieldState: {
@@ -402,14 +405,14 @@ function insert(data, index, value) {
 }
 
 var moveArrayAt = (data, from, to) => {
-    if (Array.isArray(data)) {
-        if (isUndefined(data[to])) {
-            data[to] = undefined;
-        }
-        data.splice(to, 0, data.splice(from, 1)[0]);
-        return data;
+    if (!Array.isArray(data)) {
+        return [];
+    }
+    if (isUndefined(data[to])) {
+        data[to] = undefined;
     }
-    return [];
+    data.splice(to, 0, data.splice(from, 1)[0]);
+    return data;
 };
 
 function prepend(data, value) {
@@ -537,14 +540,14 @@ const useFieldArray = (props) => {
         control._updateFieldArray(name, updateAt, {
             argA: index,
             argB: value,
-        }, updatedFieldArrayValues, true, false, false);
+        }, updatedFieldArrayValues, true, false);
     };
     const replace = (value) => {
         const updatedFieldArrayValues = convertToArrayPayload(value);
         ids.current = updatedFieldArrayValues.map(generateId);
         updateValues([...updatedFieldArrayValues]);
         setFields([...updatedFieldArrayValues]);
-        control._updateFieldArray(name, () => updatedFieldArrayValues, {}, [...updatedFieldArrayValues], true, false, false);
+        control._updateFieldArray(name, () => updatedFieldArrayValues, {}, [...updatedFieldArrayValues], true, false);
     };
     React.useEffect(() => {
         control._stateFlags.action = false;
@@ -1140,24 +1143,25 @@ function createFormControl(props = {}) {
         }
         return isValid;
     };
-    const _updateFieldArray = (name, method, args, values = [], shouldSetValues = true, shouldSetFields = true, shouldSetError = true) => {
+    const _updateFieldArray = (name, method, args, values = [], shouldSetValues = true, shouldSetFields = true) => {
         _stateFlags.action = true;
-        if (shouldSetFields && get(_fields, name)) {
+        if (shouldSetFields && Array.isArray(get(_fields, name))) {
             const fieldValues = method(get(_fields, name), args.argA, args.argB);
             shouldSetValues && set(_fields, name, fieldValues);
         }
-        if (shouldSetError && Array.isArray(get(_formState.errors, name))) {
+        if (_proxyFormState.errors &&
+            shouldSetFields &&
+            Array.isArray(get(_formState.errors, name))) {
             const errors = method(get(_formState.errors, name), args.argA, args.argB);
             shouldSetValues && set(_formState.errors, name, errors);
             unsetEmptyArray(_formState.errors, name);
         }
-        if (_proxyFormState.touchedFields && get(_formState.touchedFields, name)) {
+        if (_proxyFormState.touchedFields &&
+            Array.isArray(get(_formState.touchedFields, name))) {
             const touchedFields = method(get(_formState.touchedFields, name), args.argA, args.argB);
-            shouldSetValues &&
-                set(_formState.touchedFields, name, touchedFields);
-            unsetEmptyArray(_formState.touchedFields, name);
+            shouldSetValues && set(_formState.touchedFields, name, touchedFields);
         }
-        if (_proxyFormState.dirtyFields || _proxyFormState.isDirty) {
+        if (_proxyFormState.dirtyFields) {
             _formState.dirtyFields = getDirtyFields(_defaultValues, _formValues);
         }
         _subjects.state.next({
@@ -1183,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,
@@ -1194,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
@@ -1205,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 : {};
@@ -1355,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) => {
@@ -1374,7 +1378,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,
@@ -1386,14 +1391,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({
@@ -1417,13 +1422,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 &&
@@ -1498,13 +1503,18 @@ 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))
             : (_formState.errors = {});
         _subjects.state.next({
             errors: _formState.errors,
-            isValid: true,
         });
     };
     const setError = (name, error, options) => {
@@ -1654,27 +1664,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;
@@ -1825,6 +1837,7 @@ function createFormControl(props = {}) {
         unregister,
         setError,
         setFocus,
+        _getFieldState,
     };
 }