react-hook-form 7.56.4 → 7.57.0

package/dist/index.esm.mjs

@@ -264,7 +264,7 @@ function useFormState(props) {
         errors: false,
     });
     useIsomorphicLayoutEffect(() => control._subscribe({
-        name: name,
+        name,
         formState: _localProxyFormState.current,
         exact,
         callback: (formState) => {
@@ -317,7 +317,7 @@ function useWatch(props) {
     const _defaultValue = React__default.useRef(defaultValue);
     const [value, updateValue] = React__default.useState(control._getWatch(name, _defaultValue.current));
     useIsomorphicLayoutEffect(() => control._subscribe({
-        name: name,
+        name,
         formState: {
             values: true,
         },
@@ -414,8 +414,8 @@ function useController(props) {
         const field = get(control._fields, name);
         if (field && elm) {
             field._f.ref = {
-                focus: () => elm.focus(),
-                select: () => elm.select(),
+                focus: () => elm.focus && elm.focus(),
+                select: () => elm.select && elm.select(),
                 setCustomValidity: (message) => elm.setCustomValidity(message),
                 reportValidity: () => elm.reportValidity(),
             };
@@ -992,6 +992,12 @@ function schemaErrorLookup(errors, _fields, name) {
                 error: foundError,
             };
         }
+        if (foundError && foundError.root && foundError.root.type) {
+            return {
+                name: `${fieldName}.root`,
+                error: foundError.root,
+            };
+        }
         names.pop();
     }
     return {
@@ -1615,7 +1621,7 @@ function createFormControl(props = {}) {
                 return;
             }
             const fieldValue = value[fieldKey];
-            const fieldName = `${name}.${fieldKey}`;
+            const fieldName = name + '.' + fieldKey;
             const field = get(_fields, fieldName);
             (_names.array.has(name) ||
                 isObject(fieldValue) ||
@@ -2214,6 +2220,7 @@ function createFormControl(props = {}) {
             setError,
             _subscribe,
             _runSchema,
+            _focusError,
             _getWatch,
             _getDirty,
             _setValid,
@@ -2673,10 +2680,13 @@ function useForm(props = {}) {
         if (props.reValidateMode) {
             control._options.reValidateMode = props.reValidateMode;
         }
-        if (props.errors && !isEmptyObject(props.errors)) {
+    }, [control, props.mode, props.reValidateMode]);
+    React__default.useEffect(() => {
+        if (props.errors) {
             control._setErrors(props.errors);
+            control._focusError();
         }
-    }, [control, props.errors, props.mode, props.reValidateMode]);
+    }, [control, props.errors]);
     React__default.useEffect(() => {
         props.shouldUnregister &&
             control._subjects.state.next({