react-hook-form 7.19.5 → 7.20.0

package/dist/index.esm.js

@@ -103,49 +103,35 @@ var shouldRenderFormState = (formStateData, _proxyFormState, isRoot) => {
 
 var convertToArrayPayload = (value) => (Array.isArray(value) ? value : [value]);
 
-var shouldSubscribeByName = (name, signalName) => !name ||
-    !signalName ||
-    name === signalName ||
-    convertToArrayPayload(name).some((currentName) => currentName &&
-        (currentName.startsWith(signalName) ||
-            signalName.startsWith(currentName)));
-
-const tearDown = (_subscription) => {
-    if (_subscription.current) {
-        _subscription.current.unsubscribe();
-        _subscription.current = undefined;
-    }
-};
-const updateSubscriptionProps = ({ _subscription, _props }) => {
-    if (_props.current.disabled) {
-        tearDown(_subscription);
-    }
-    else if (!_subscription.current) {
-        _subscription.current = _props.current.subject.subscribe({
-            next: _props.current.callback,
-        });
-    }
-};
+var shouldSubscribeByName = (name, signalName, exact) => exact && signalName
+    ? name === signalName
+    : !name ||
+        !signalName ||
+        name === signalName ||
+        convertToArrayPayload(name).some((currentName) => currentName &&
+            (currentName.startsWith(signalName) ||
+                signalName.startsWith(currentName)));
+
 function useSubscribe(props) {
-    const _subscription = React.useRef();
     const _props = React.useRef(props);
     _props.current = props;
-    updateSubscriptionProps({
-        _subscription,
-        _props,
-    });
     React.useEffect(() => {
-        updateSubscriptionProps({
-            _subscription,
-            _props,
-        });
-        return () => tearDown(_subscription);
-    }, []);
+        const tearDown = (subscription) => {
+            if (subscription) {
+                subscription.unsubscribe();
+            }
+        };
+        const subscription = !props.disabled &&
+            _props.current.subject.subscribe({
+                next: _props.current.callback,
+            });
+        return () => tearDown(subscription);
+    }, [props.disabled]);
 }
 
 function useFormState(props) {
     const methods = useFormContext();
-    const { control = methods.control, disabled, name } = props || {};
+    const { control = methods.control, disabled, name, exact } = props || {};
     const [formState, updateFormState] = React.useState(control._formState);
     const _localProxyFormState = React.useRef({
         isDirty: false,
@@ -159,9 +145,9 @@ function useFormState(props) {
     _name.current = name;
     useSubscribe({
         disabled,
-        callback: (formState) => shouldSubscribeByName(_name.current, formState.name) &&
-            shouldRenderFormState(formState, _localProxyFormState.current) &&
-            updateFormState(Object.assign(Object.assign({}, control._formState), formState)),
+        callback: (value) => shouldSubscribeByName(_name.current, value.name, exact) &&
+            shouldRenderFormState(value, _localProxyFormState.current) &&
+            updateFormState(Object.assign(Object.assign({}, control._formState), value)),
         subject: control._subjects.state,
     });
     return getProxyFormState(formState, control._proxyFormState, _localProxyFormState.current, false);
@@ -185,14 +171,14 @@ function generateWatchOutput(names, _names, formValues, isGlobal) {
 
 function useWatch(props) {
     const methods = useFormContext();
-    const { control = methods.control, name, defaultValue, disabled, } = props || {};
+    const { control = methods.control, name, defaultValue, disabled, exact, } = props || {};
     const _name = React.useRef(name);
     _name.current = name;
     useSubscribe({
         disabled,
         subject: control._subjects.watch,
         callback: (formState) => {
-            if (shouldSubscribeByName(_name.current, formState.name)) {
+            if (shouldSubscribeByName(_name.current, formState.name, exact)) {
                 const fieldValues = generateWatchOutput(_name.current, control._names, formState.values || control._formValues);
                 updateValue(isUndefined(_name.current)
                     ? Object.assign({}, fieldValues) : Array.isArray(fieldValues)
@@ -213,10 +199,12 @@ function useWatch(props) {
 function useController(props) {
     const methods = useFormContext();
     const { name, control = methods.control, shouldUnregister } = props;
+    const isArrayField = isNameInFieldArray(control._names.array, name);
     const value = useWatch({
         control,
         name,
         defaultValue: get(control._formValues, name, get(control._defaultValues, name, props.defaultValue)),
+        exact: !isArrayField,
     });
     const formState = useFormState({
         control,
@@ -235,7 +223,7 @@ function useController(props) {
         updateMounted(name, true);
         return () => {
             const _shouldUnregisterField = control._options.shouldUnregister || shouldUnregister;
-            if (isNameInFieldArray(control._names.array, name)
+            if (isArrayField
                 ? _shouldUnregisterField && !control._stateFlags.action
                 : _shouldUnregisterField) {
                 control.unregister(name, { keepDefaultValue: true });
@@ -244,7 +232,7 @@ function useController(props) {
                 updateMounted(name, false);
             }
         };
-    }, [name, control, shouldUnregister]);
+    }, [name, control, isArrayField, shouldUnregister]);
     return {
         field: {
             onChange: (event) => {
@@ -259,7 +247,7 @@ function useController(props) {
             onBlur: () => {
                 registerProps.onBlur({
                     target: {
-                        value,
+                        value: get(control._formValues, name),
                         name: name,
                     },
                     type: EVENTS.BLUR,
@@ -347,6 +335,12 @@ var getFocusFieldName = (name, index, options = {}) => options.shouldFocus || is
         `${name}.${isUndefined(options.focusIndex) ? index : options.focusIndex}.`
     : '';
 
+var isWatched = (name, _names, isBlurEvent) => !isBlurEvent &&
+    (_names.watchAll ||
+        _names.watch.has(name) ||
+        [..._names.watch].some((watchName) => name.startsWith(watchName) &&
+            /^\.\w+/.test(name.slice(watchName.length))));
+
 var mapCurrentIds = (values, _fieldIds, keyName) => values.map((value, index) => {
     const output = _fieldIds.current[index];
     return Object.assign(Object.assign({}, value), (output ? { [keyName]: output[keyName] } : {}));
@@ -507,17 +501,7 @@ const useFieldArray = (props) => {
     };
     React.useEffect(() => {
         control._stateFlags.action = false;
-        if (control._names.watchAll) {
-            control._subjects.state.next({});
-        }
-        else {
-            for (const watchField of control._names.watch) {
-                if (name.startsWith(watchField)) {
-                    control._subjects.state.next({});
-                    break;
-                }
-            }
-        }
+        isWatched(name, control._names) && control._subjects.state.next({});
         if (_actioned.current) {
             control._executeSchema([name]).then((result) => {
                 const error = get(result.errors, name);
@@ -1114,10 +1098,6 @@ function createFormControl(props = {}) {
         clearTimeout(timer);
         timer = window.setTimeout(() => callback(...args), wait);
     };
-    const isFieldWatched = (name, isBlurEvent) => !isBlurEvent &&
-        (_names.watchAll ||
-            _names.watch.has(name) ||
-            _names.watch.has((name.match(/\w+/) || [])[0]));
     const _updateValid = async (shouldSkipRender) => {
         let isValid = false;
         if (_proxyFormState.isValid) {
@@ -1386,7 +1366,7 @@ function createFormControl(props = {}) {
                 ? setValues(name, value, options)
                 : setFieldValue(name, value, options);
         }
-        isFieldWatched(name) && _subjects.state.next({});
+        isWatched(name, _names) && _subjects.state.next({});
         _subjects.watch.next({
             name,
         });
@@ -1405,7 +1385,7 @@ function createFormControl(props = {}) {
                 !get(_formState.errors, name) &&
                 !field._f.deps) ||
                 skipValidation(isBlurEvent, get(_formState.touchedFields, name), _formState.isSubmitted, validationModeAfterSubmit, validationModeBeforeSubmit);
-            const isWatched = isFieldWatched(name, isBlurEvent);
+            const watched = isWatched(name, _names, isBlurEvent);
             if (isBlurEvent) {
                 field._f.onBlur && field._f.onBlur(event);
             }
@@ -1414,7 +1394,7 @@ function createFormControl(props = {}) {
             }
             set(_formValues, name, fieldValue);
             const fieldState = updateTouchAndDirty(name, fieldValue, isBlurEvent, false);
-            const shouldRender = !isEmptyObject(fieldState) || isWatched;
+            const shouldRender = !isEmptyObject(fieldState) || watched;
             !isBlurEvent &&
                 _subjects.watch.next({
                     name,
@@ -1422,9 +1402,9 @@ function createFormControl(props = {}) {
                 });
             if (shouldSkipValidation) {
                 return (shouldRender &&
-                    _subjects.state.next(Object.assign({ name }, (isWatched ? {} : fieldState))));
+                    _subjects.state.next(Object.assign({ name }, (watched ? {} : fieldState))));
             }
-            !isBlurEvent && isWatched && _subjects.state.next({});
+            !isBlurEvent && watched && _subjects.state.next({});
             validateFields[name] = validateFields[name] ? +1 : 1;
             _proxyFormState.isValidating &&
                 _subjects.state.next({
@@ -1838,9 +1818,9 @@ function useForm(props = {}) {
     const control = _formControl.current.control;
     useSubscribe({
         subject: control._subjects.state,
-        callback: (formState) => {
-            if (shouldRenderFormState(formState, control._proxyFormState, true)) {
-                control._formState = Object.assign(Object.assign({}, control._formState), formState);
+        callback: (value) => {
+            if (shouldRenderFormState(value, control._proxyFormState, true)) {
+                control._formState = Object.assign(Object.assign({}, control._formState), value);
                 updateFormState(Object.assign({}, control._formState));
             }
         },