react-hook-form 7.86.0 → 7.87.0

package/dist/index.esm.mjs

@@ -22,6 +22,24 @@ var getEventValue = (event) => isObject(event) && event.target
             : event.target.value
     : event;
 
+const FIELD_PATH_RE = /[.[\]'"]/;
+var stringToPath = (input) => input.split(FIELD_PATH_RE).filter(Boolean);
+
+function getNullAncestorValue(control, name) {
+    const segments = stringToPath(name);
+    let formValues = control._formValues;
+    let defaultValues = control._defaultValues;
+    for (let i = 0; i < segments.length - 1; i++) {
+        const key = segments[i];
+        formValues = formValues == null ? formValues : formValues[key];
+        defaultValues = defaultValues == null ? defaultValues : defaultValues[key];
+        if (formValues === null || defaultValues === null) {
+            return null;
+        }
+    }
+    return undefined;
+}
+
 var isNameInFieldArray = (names, name) => name
     .split('.')
     .some((part, index, arr) => !isNaN(Number(part)) && names.has(arr.slice(0, index).join('.')));
@@ -86,9 +104,6 @@ var isKey = (value) => IS_KEY_RE.test(value);
 
 var isUndefined = (val) => val === undefined;
 
-const FIELD_PATH_RE = /[.[\]'"]/;
-var stringToPath = (input) => input.split(FIELD_PATH_RE).filter(Boolean);
-
 var get = (object, path, defaultValue) => {
     if (!path || !isObject(object)) {
         return defaultValue;
@@ -229,11 +244,20 @@ function deepEqual(object1, object2, visited = new WeakMap()) {
     return true;
 }
 
-function useResyncOnReconnect() {
+function useResyncOnReconnect(getInitialValue) {
     const _connected = React.useRef(false);
+    const _initialized = React.useRef(false);
     const _prevValue = React.useRef(undefined);
+    const _renderCount = React.useRef(0);
+    _renderCount.current++;
+    if (!_initialized.current && getInitialValue) {
+        _initialized.current = true;
+        _prevValue.current = cloneObject(getInitialValue());
+    }
     const resyncIfNeeded = React.useCallback((enabled, getCurrentValue, setValue) => {
-        if (enabled && _connected.current) {
+        if (enabled &&
+            (_connected.current ||
+                (_initialized.current && _renderCount.current > 1))) {
             const currentValue = getCurrentValue();
             if (!deepEqual(_prevValue.current, currentValue)) {
                 setValue(currentValue);
@@ -282,10 +306,11 @@ function useResyncOnReconnect() {
 function useFormState(props) {
     const formControl = useFormControlContext();
     const { control = formControl, disabled, name, exact } = props || {};
-    const [formState, updateFormState] = React.useState(() => ({
+    const getCurrentFormState = () => ({
         ...control._formState,
         defaultValues: control._defaultValues,
-    }));
+    });
+    const [formState, updateFormState] = React.useState(getCurrentFormState);
     const _localProxyFormState = React.useRef({
         isDirty: false,
         isLoading: false,
@@ -296,12 +321,8 @@ function useFormState(props) {
         isValid: false,
         errors: false,
     });
-    const { resyncIfNeeded, snapshot } = useResyncOnReconnect();
+    const { resyncIfNeeded, snapshot } = useResyncOnReconnect(getCurrentFormState);
     useIsomorphicLayoutEffect(() => {
-        const getCurrentFormState = () => ({
-            ...control._formState,
-            defaultValues: control._defaultValues,
-        });
         resyncIfNeeded(!disabled, getCurrentFormState, updateFormState);
         const unsubscribe = control._subscribe({
             name,
@@ -336,7 +357,7 @@ var generateWatchOutput = (names, _names, formValues, isGlobal, defaultValue) =>
     }
     if (Array.isArray(names)) {
         return names.map((fieldName) => (isGlobal && _names.watch.add(fieldName),
-            get(formValues, fieldName)));
+            get(formValues, fieldName, get(defaultValue, fieldName))));
     }
     isGlobal && (_names.watchAll = true);
     return formValues;
@@ -367,10 +388,11 @@ function useWatch(props) {
     const _prevControl = React.useRef(control);
     const _prevName = React.useRef(name);
     _compute.current = compute;
-    const [value, updateValue] = React.useState(() => {
+    const getInitialOutput = () => {
         const defaultValue = control._getWatch(name, _defaultValue.current);
         return _compute.current ? _compute.current(defaultValue) : defaultValue;
-    });
+    };
+    const [value, updateValue] = React.useState(getInitialOutput);
     const getCurrentOutput = React.useCallback((values) => {
         const formValues = generateWatchOutput(name, control._names, values || control._formValues, false, _defaultValue.current);
         return _compute.current ? _compute.current(formValues) : formValues;
@@ -390,7 +412,7 @@ function useWatch(props) {
             }
         }
     }, [control._formValues, control._names, disabled, name]);
-    const { resyncIfNeeded, snapshot } = useResyncOnReconnect();
+    const { resyncIfNeeded, snapshot } = useResyncOnReconnect(getInitialOutput);
     const _refreshValue = React.useRef(refreshValue);
     _refreshValue.current = refreshValue;
     const _getCurrentOutput = React.useRef(getCurrentOutput);
@@ -471,7 +493,12 @@ function useController(props) {
     const formControl = useFormControlContext();
     const { name, disabled, control = formControl, shouldUnregister, defaultValue, exact = true, } = props;
     const isArrayField = isNameInFieldArray(control._names.array, name);
-    const defaultValueMemo = React.useMemo(() => get(control._formValues, name, get(control._defaultValues, name, defaultValue)), [control, name, defaultValue]);
+    const defaultValueMemo = React.useMemo(() => {
+        const resolved = get(control._formValues, name, get(control._defaultValues, name, defaultValue));
+        return isUndefined(resolved)
+            ? getNullAncestorValue(control, name)
+            : resolved;
+    }, [control, name, defaultValue]);
     const value = useWatch({
         control,
         name,
@@ -2617,7 +2644,7 @@ function createFormControl(props = {}) {
         }
         for (const fieldKey in value) {
             if (!value.hasOwnProperty(fieldKey)) {
-                return;
+                continue;
             }
             const fieldValue = value[fieldKey];
             const fieldName = name + '.' + fieldKey;
@@ -2738,7 +2765,7 @@ function createFormControl(props = {}) {
             const shouldSkipValidation = hasNoValidationEffect ||
                 skipValidation(isBlurEvent, get(_formState.touchedFields, name), _formState.isSubmitted, _validationModeAfterSubmit, _validationModeBeforeSubmit);
             const watched = isWatched(name, _names, isBlurEvent);
-            set(_formValues, name, fieldValue);
+            set(_formValues, name, cloneObject(fieldValue));
             if (isBlurEvent) {
                 if (!target || !target.readOnly) {
                     field._f.onBlur && field._f.onBlur(event);
@@ -2870,6 +2897,12 @@ function createFormControl(props = {}) {
                 delete delayErrorCallbacks[name];
             }
         }
+        if (options.shouldTouch) {
+            for (const fieldName of name ? fieldNames : _names.mount) {
+                !_names.array.has(fieldName) &&
+                    set(_formState.touchedFields, fieldName, true);
+            }
+        }
         _subjects.state.next({
             ...(!isString(name) ||
                 ((_proxyFormState.isValid || _proxySubscribeFormState.isValid) &&
@@ -2877,6 +2910,10 @@ function createFormControl(props = {}) {
                 ? {}
                 : { name }),
             ...(_options.resolver || !name ? { isValid } : {}),
+            ...(options.shouldTouch &&
+                (_proxyFormState.touchedFields || _proxySubscribeFormState.touchedFields)
+                ? { touchedFields: _formState.touchedFields }
+                : {}),
             errors: _formState.errors,
         });
         options.shouldFocus &&
@@ -3244,7 +3281,7 @@ function createFormControl(props = {}) {
             }
             if (!options.keepError) {
                 unset(_formState.errors, name);
-                _proxyFormState.isValid && _setValid();
+                _setValid();
             }
             _subjects.state.next({ ..._formState });
         }