react-hook-form 7.37.0-next.0 → 7.38.0

package/dist/index.esm.mjs

@@ -395,9 +395,9 @@ function useController(props) {
                 },
                 type: EVENTS.BLUR,
             }), [name, control]),
-            ref: React.useCallback((elm) => {
+            ref: (elm) => {
                 const field = get(control._fields, name);
-                if (elm && field && elm.focus) {
+                if (field && elm) {
                     field._f.ref = {
                         focus: () => elm.focus(),
                         select: () => elm.select(),
@@ -405,7 +405,7 @@ function useController(props) {
                         reportValidity: () => elm.reportValidity(),
                     };
                 }
-            }, [name, control._fields]),
+            },
         },
         formState,
         fieldState: Object.defineProperties({}, {
@@ -694,11 +694,22 @@ var validateField = async (field, inputValue, validateAllFieldCriteria, shouldUs
         }
         else {
             const valueDate = ref.valueAsDate || new Date(inputValue);
-            if (isString(maxOutput.value)) {
-                exceedMax = valueDate > new Date(maxOutput.value);
+            const convertTimeToDate = (time) => new Date(new Date().toDateString() + ' ' + time);
+            const isTime = ref.type == 'time';
+            const isWeek = ref.type == 'week';
+            if (isString(maxOutput.value) && inputValue) {
+                exceedMax = isTime
+                    ? convertTimeToDate(inputValue) > convertTimeToDate(maxOutput.value)
+                    : isWeek
+                        ? inputValue > maxOutput.value
+                        : valueDate > new Date(maxOutput.value);
             }
-            if (isString(minOutput.value)) {
-                exceedMin = valueDate < new Date(minOutput.value);
+            if (isString(minOutput.value) && inputValue) {
+                exceedMin = isTime
+                    ? convertTimeToDate(inputValue) < convertTimeToDate(minOutput.value)
+                    : isWeek
+                        ? inputValue < minOutput.value
+                        : valueDate < new Date(minOutput.value);
             }
         }
         if (exceedMax || exceedMin) {
@@ -793,10 +804,10 @@ function append(data, value) {
     return [...data, ...convertToArrayPayload(value)];
 }
 
-function isPlainObject(tempObject) {
+var isPlainObject = (tempObject) => {
     const prototypeCopy = tempObject.constructor && tempObject.constructor.prototype;
     return (isObject(prototypeCopy) && prototypeCopy.hasOwnProperty('isPrototypeOf'));
-}
+};
 
 var isWeb = typeof window !== 'undefined' &&
     typeof window.HTMLElement !== 'undefined' &&
@@ -931,7 +942,7 @@ var updateAt = (fieldValues, index, value) => {
 };
 
 /**
- * A custom hook that exposes convenient methods to perform operations with a list of dynamic inputs that need to be appended, updated, removed etc.
+ * A custom hook that exposes convenient methods to perform operations with a list of dynamic inputs that need to be appended, updated, removed etc. • [Demo](https://codesandbox.io/s/react-hook-form-usefieldarray-ssugn) • [Video](https://youtu.be/4MrbfGSFY2A)
  *
  * @remarks
  * [API](https://react-hook-form.com/api/usefieldarray) • [Demo](https://codesandbox.io/s/react-hook-form-usefieldarray-ssugn)
@@ -982,9 +993,11 @@ function useFieldArray(props) {
         control.register(name, props.rules);
     const callback = React.useCallback(({ values, name: fieldArrayName, }) => {
         if (fieldArrayName === _name.current || !fieldArrayName) {
-            const fieldValues = get(values, _name.current, []);
-            setFields(fieldValues);
-            ids.current = fieldValues.map(generateId);
+            const fieldValues = get(values, _name.current);
+            if (Array.isArray(fieldValues)) {
+                setFields(fieldValues);
+                ids.current = fieldValues.map(generateId);
+            }
         }
     }, []);
     useSubscribe({
@@ -1081,7 +1094,9 @@ function useFieldArray(props) {
     React.useEffect(() => {
         control._stateFlags.action = false;
         isWatched(name, control._names) && control._subjects.state.next({});
-        if (_actioned.current) {
+        if (_actioned.current &&
+            (!getValidationModes(control._options.mode).isOnSubmit ||
+                control._formState.isSubmitted)) {
             if (control._options.resolver) {
                 control._executeSchema([name]).then((result) => {
                     const error = get(result.errors, name);
@@ -1098,11 +1113,7 @@ function useFieldArray(props) {
             }
             else {
                 const field = get(control._fields, name);
-                const validationModeBeforeSubmit = getValidationModes(control._options.mode);
-                if ((!validationModeBeforeSubmit.isOnSubmit ||
-                    control._formState.isSubmitted) &&
-                    field &&
-                    field._f) {
+                if (field && field._f) {
                     validateField(field, get(control._formValues, name), control._options.criteriaMode === VALIDATION_MODE.all, control._options.shouldUseNativeValidation, true).then((error) => !isEmptyObject(error) &&
                         control._subjects.state.next({
                             errors: updateFieldArrayRootError(control._formState.errors, error, name),
@@ -1115,7 +1126,7 @@ function useFieldArray(props) {
             values: control._formValues,
         });
         control._names.focus &&
-            focusFieldBy(control._fields, (key) => key.startsWith(control._names.focus));
+            focusFieldBy(control._fields, (key) => !!key && key.startsWith(control._names.focus));
         control._names.focus = '';
         control._proxyFormState.isValid && control._updateValid();
     }, [fields, name, control]);
@@ -1655,7 +1666,7 @@ function createFormControl(props = {}) {
                         ? ''
                         : value;
                 if (isMultipleSelect(fieldReference.ref)) {
-                    [...fieldReference.ref.options].forEach((selectRef) => (selectRef.selected = fieldValue.includes(selectRef.value)));
+                    [...fieldReference.ref.options].forEach((optionRef) => (optionRef.selected = fieldValue.includes(optionRef.value)));
                 }
                 else if (fieldReference.refs) {
                     if (isCheckBoxInput(fieldReference.ref)) {
@@ -1818,13 +1829,13 @@ function createFormControl(props = {}) {
                 (_proxyFormState.isValid && isValid !== _formState.isValid)
                 ? {}
                 : { name }),
-            ...(_options.resolver ? { isValid } : {}),
+            ...(_options.resolver || !name ? { isValid } : {}),
             errors: _formState.errors,
             isValidating: false,
         });
         options.shouldFocus &&
             !validationResult &&
-            focusFieldBy(_fields, (key) => get(_formState.errors, key), name ? fieldNames : _names.mount);
+            focusFieldBy(_fields, (key) => key && get(_formState.errors, key), name ? fieldNames : _names.mount);
         return validationResult;
     };
     const getValues = (fieldNames) => {
@@ -1975,6 +1986,8 @@ function createFormControl(props = {}) {
             },
         };
     };
+    const _focusError = () => _options.shouldFocusError &&
+        focusFieldBy(_fields, (key) => key && get(_formState.errors, key), _names.mount);
     const handleSubmit = (onValid, onInvalid) => async (e) => {
         if (e) {
             e.preventDefault && e.preventDefault();
@@ -2005,8 +2018,7 @@ function createFormControl(props = {}) {
                 if (onInvalid) {
                     await onInvalid({ ..._formState.errors }, e);
                 }
-                _options.shouldFocusError &&
-                    focusFieldBy(_fields, (key) => get(_formState.errors, key), _names.mount);
+                _focusError();
             }
         }
         catch (err) {
@@ -2155,6 +2167,7 @@ function createFormControl(props = {}) {
             unregister,
             getFieldState,
             _executeSchema,
+            _focusError,
             _getWatch,
             _getDirty,
             _updateValid,
@@ -2291,6 +2304,9 @@ function useForm(props = {}) {
         }
         control._removeUnmounted();
     });
+    React.useEffect(() => {
+        formState.submitCount && control._focusError();
+    }, [control, formState.submitCount]);
     _formControl.current.formState = getProxyFormState(formState, control);
     return _formControl.current;
 }