react-hook-form 7.37.0 → 7.39.0

package/dist/index.esm.mjs

@@ -395,15 +395,10 @@ function useController(props) {
                 },
                 type: EVENTS.BLUR,
             }), [name, control]),
-            ref: (elm) => {
+            ref: (ref) => {
                 const field = get(control._fields, name);
-                if (field && elm) {
-                    field._f.ref = {
-                        focus: () => elm.focus(),
-                        select: () => elm.select(),
-                        setCustomValidity: (message) => elm.setCustomValidity(message),
-                        reportValidity: () => elm.reportValidity(),
-                    };
+                if (field && ref) {
+                    field._f.ref = ref;
                 }
             },
         },
@@ -632,8 +627,8 @@ var validateField = async (field, inputValue, validateAllFieldCriteria, shouldUs
     }
     const inputRef = refs ? refs[0] : ref;
     const setCustomValidity = (message) => {
-        if (shouldUseNativeValidation && inputRef.reportValidity) {
-            inputRef.setCustomValidity(isBoolean(message) ? '' : message || ' ');
+        if (shouldUseNativeValidation && isString(message)) {
+            inputRef.setCustomValidity(message);
             inputRef.reportValidity();
         }
     };
@@ -694,11 +689,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) {
@@ -931,7 +937,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 +988,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({
@@ -1113,7 +1121,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]);
@@ -1246,7 +1254,9 @@ function getDirtyFieldsFromDefaultValues(data, formValues, dirtyFieldsFromValues
                 }
             }
             else {
-                dirtyFieldsFromValues[key] = !deepEqual(data[key], formValues[key]);
+                deepEqual(data[key], formValues[key])
+                    ? delete dirtyFieldsFromValues[key]
+                    : (dirtyFieldsFromValues[key] = true);
             }
         }
     }
@@ -1429,13 +1439,13 @@ function createFormControl(props = {}) {
         clearTimeout(timer);
         timer = window.setTimeout(callback, wait);
     };
-    const _updateValid = async (shouldSkipRender) => {
+    const _updateValid = async () => {
         let isValid = false;
         if (_proxyFormState.isValid) {
             isValid = _options.resolver
                 ? isEmptyObject((await _executeSchema()).errors)
                 : await executeBuiltInValidation(_fields, true);
-            if (!shouldSkipRender && isValid !== _formState.isValid) {
+            if (isValid !== _formState.isValid) {
                 _formState.isValid = isValid;
                 _subjects.state.next({
                     isValid,
@@ -1529,9 +1539,11 @@ function createFormControl(props = {}) {
         isFieldDirty && shouldRender && _subjects.state.next(output);
         return isFieldDirty ? output : {};
     };
-    const shouldRenderByError = async (name, isValid, error, fieldState) => {
+    const shouldRenderByError = (name, isValid, error, fieldState) => {
         const previousFieldError = get(_formState.errors, name);
-        const shouldUpdateValid = _proxyFormState.isValid && _formState.isValid !== isValid;
+        const shouldUpdateValid = _proxyFormState.isValid &&
+            isBoolean(isValid) &&
+            _formState.isValid !== isValid;
         if (props.delayError && error) {
             delayErrorCallback = debounce(() => updateErrors(name, error));
             delayErrorCallback(props.delayError);
@@ -1548,7 +1560,7 @@ function createFormControl(props = {}) {
             shouldUpdateValid) {
             const updatedFormState = {
                 ...fieldState,
-                ...(shouldUpdateValid ? { isValid } : {}),
+                ...(shouldUpdateValid && isBoolean(isValid) ? { isValid } : {}),
                 errors: _formState.errors,
                 name,
             };
@@ -1762,11 +1774,14 @@ function createFormControl(props = {}) {
                     type: event.type,
                 });
             if (shouldSkipValidation) {
+                _proxyFormState.isValid && _updateValid();
                 return (shouldRender &&
                     _subjects.state.next({ name, ...(watched ? {} : fieldState) }));
             }
             !isBlurEvent && watched && _subjects.state.next({});
-            validateFields[name] = validateFields[name] ? +1 : 1;
+            validateFields[name] = validateFields[name]
+                ? validateFields[name] + 1
+                : 1;
             _subjects.state.next({
                 isValidating: true,
             });
@@ -1780,7 +1795,7 @@ function createFormControl(props = {}) {
             }
             else {
                 error = (await validateField(field, get(_formValues, name), shouldDisplayAllAssociatedErrors, _options.shouldUseNativeValidation))[name];
-                isValid = await _updateValid(true);
+                _updateValid();
             }
             field._f.deps &&
                 trigger(field._f.deps);
@@ -1816,13 +1831,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) => {
@@ -1973,6 +1988,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();
@@ -2003,8 +2020,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) {
@@ -2072,13 +2088,13 @@ function createFormControl(props = {}) {
                             const fieldReference = Array.isArray(field._f.refs)
                                 ? field._f.refs[0]
                                 : field._f.ref;
-                            try {
-                                if (isHTMLElement(fieldReference)) {
-                                    fieldReference.closest('form').reset();
+                            if (isHTMLElement(fieldReference)) {
+                                const form = fieldReference.closest('form');
+                                if (form) {
+                                    form.reset();
                                     break;
                                 }
                             }
-                            catch (_a) { }
                         }
                     }
                 }
@@ -2153,6 +2169,7 @@ function createFormControl(props = {}) {
             unregister,
             getFieldState,
             _executeSchema,
+            _focusError,
             _getWatch,
             _getDirty,
             _updateValid,
@@ -2289,6 +2306,9 @@ function useForm(props = {}) {
         }
         control._removeUnmounted();
     });
+    React.useEffect(() => {
+        formState.submitCount && control._focusError();
+    }, [control, formState.submitCount]);
     _formControl.current.formState = getProxyFormState(formState, control);
     return _formControl.current;
 }