react-hook-form 7.0.4 → 7.0.7

package/dist/index.esm.js

@@ -725,14 +725,6 @@ function getFieldValue(field) {
     }
 }
 
-var isErrorStateChanged = ({ errors, name, error, validFields, fieldsWithValidation, }) => {
-    const isValid = isUndefined(error);
-    const previousError = get(errors, name);
-    return ((isValid && !!previousError) ||
-        (!isValid && !deepEqual(previousError, error, true)) ||
-        (isValid && get(fieldsWithValidation, name) && !get(validFields, name)));
-};
-
 var skipValidation = ({ isOnBlur, isOnChange, isOnTouch, isTouched, isReValidateOnBlur, isReValidateOnChange, isBlurEvent, isSubmitted, isOnAll, }) => {
     if (isOnAll) {
         return false;
@@ -779,7 +771,7 @@ var validateField = async ({ _f: { ref, refs, required, maxLength, minLength, mi
     const isRadio = isRadioInput(ref);
     const isCheckBox = isCheckBoxInput(ref);
     const isRadioOrCheckbox = isRadio || isCheckBox;
-    const isEmpty = (valueAsNumber && ref.value === '') ||
+    const isEmpty = ((valueAsNumber || isFileInput(ref)) && !ref.value) ||
         inputValue === '' ||
         (Array.isArray(inputValue) && !inputValue.length);
     const appendErrorsCurry = appendErrors.bind(null, name, validateAllFieldCriteria, error);
@@ -850,7 +842,7 @@ var validateField = async ({ _f: { ref, refs, required, maxLength, minLength, mi
     }
     if (isString(inputValue) && pattern && !isEmpty) {
         const { value: patternValue, message } = getValueAndMessage(pattern);
-        if (isRegex(patternValue) && !patternValue.test(inputValue)) {
+        if (isRegex(patternValue) && !inputValue.match(patternValue)) {
             error[name] = Object.assign({ type: INPUT_VALIDATION_RULES.pattern, message,
                 ref }, appendErrorsCurry(INPUT_VALIDATION_RULES.pattern, message));
             if (!validateAllFieldCriteria) {
@@ -1001,15 +993,13 @@ function useForm({ mode = VALIDATION_MODE.onSubmit, reValidateMode = VALIDATION_
         deepEqual(validFieldsRef.current, fieldsWithValidationRef.current) &&
             isEmptyObject(formStateRef.current.errors));
     const shouldRenderBaseOnError = React.useCallback((name, error, shouldRender = false, state = {}, isValid, isWatched) => {
-        let shouldReRender = shouldRender ||
-            isErrorStateChanged({
-                errors: formStateRef.current.errors,
-                error,
-                name,
-                validFields: validFieldsRef.current,
-                fieldsWithValidation: fieldsWithValidationRef.current,
-            });
         const previousError = get(formStateRef.current.errors, name);
+        let shouldReRender = shouldRender ||
+            !deepEqual(previousError, error, true) ||
+            (readFormStateRef.current.isValid &&
+                isUndefined(error) &&
+                get(fieldsWithValidationRef.current, name) &&
+                !get(validFieldsRef.current, name));
         if (error) {
             unset(validFieldsRef.current, name);
             shouldReRender =
@@ -1182,18 +1172,33 @@ function useForm({ mode = VALIDATION_MODE.onSubmit, reValidateMode = VALIDATION_
     const isFieldWatched = (name) => isWatchAllRef.current ||
         watchFieldsRef.current.has(name) ||
         watchFieldsRef.current.has((name.match(/\w+/) || [])[0]);
-    const updateValueAndGetDefault = (name) => {
+    const updateValidAndValue = (name, options, isWithinRefCallback) => {
         let defaultValue;
         const field = get(fieldsRef.current, name);
+        const useFormDefaultValue = get(defaultValuesRef.current, name);
         if (field &&
             (!isEmptyObject(defaultValuesRef.current) || !isUndefined(field._f.value))) {
             defaultValue = isUndefined(field._f.value)
-                ? get(defaultValuesRef.current, name)
+                ? useFormDefaultValue
                 : field._f.value;
-            if (!isUndefined(defaultValue)) {
+            if (!isNullOrUndefined(defaultValue)) {
                 setFieldValue(name, defaultValue);
             }
         }
+        if ((useFormDefaultValue || (!useFormDefaultValue && isWithinRefCallback)) &&
+            options &&
+            !validationMode.isOnSubmit &&
+            field &&
+            readFormStateRef.current.isValid) {
+            validateField(field, isValidateAllFieldCriteria).then((error) => {
+                isEmptyObject(error)
+                    ? set(validFieldsRef.current, name, true)
+                    : unset(validFieldsRef.current, name);
+                formStateRef.current.isValid &&
+                    !isEmptyObject(error) &&
+                    setFormState(Object.assign(Object.assign({}, formStateRef.current), { isValid: getIsValid() }));
+            });
+        }
         return defaultValue;
     };
     const setValue = (name, value, options = {}) => {
@@ -1231,7 +1236,8 @@ function useForm({ mode = VALIDATION_MODE.onSubmit, reValidateMode = VALIDATION_
         let isValid;
         const field = get(fieldsRef.current, name);
         if (field) {
-            const inputValue = inputType ? getFieldValue(field) : value;
+            let inputValue = inputType ? getFieldValue(field) : undefined;
+            inputValue = isUndefined(inputValue) ? value : inputValue;
             const isBlurEvent = type === EVENTS.BLUR;
             const { isOnBlur: isReValidateOnBlur, isOnChange: isReValidateOnChange, } = getValidationModes(reValidateMode);
             const shouldSkipValidation = skipValidation(Object.assign({ isBlurEvent, isTouched: !!get(formStateRef.current.touchedFields, name), isSubmitted: formStateRef.current.isSubmitted, isReValidateOnBlur,
@@ -1243,7 +1249,8 @@ function useForm({ mode = VALIDATION_MODE.onSubmit, reValidateMode = VALIDATION_
             const state = updateAndGetDirtyState(name, field._f.value, false);
             if (isBlurEvent && !get(formStateRef.current.touchedFields, name)) {
                 set(formStateRef.current.touchedFields, name, true);
-                state.touchedFields = formStateRef.current.touchedFields;
+                readFormStateRef.current.touchedFields &&
+                    (state.touchedFields = formStateRef.current.touchedFields);
             }
             let shouldRender = !isEmptyObject(state) || isWatched;
             if (shouldSkipValidation) {
@@ -1393,12 +1400,11 @@ function useForm({ mode = VALIDATION_MODE.onSubmit, reValidateMode = VALIDATION_
         let field = get(fieldsRef.current, name);
         if (field) {
             const isRadioOrCheckbox = isRadioOrCheckboxFunction(ref);
-            if ((isRadioOrCheckbox
-                ? Array.isArray(field._f.refs) &&
-                    compact(field._f.refs).find((option) => ref.value === option.value && option === ref)
-                : ref === field._f.ref) ||
-                !field ||
-                (isWeb && isHTMLElement(field._f.ref) && !isHTMLElement(ref))) {
+            if (ref === field._f.ref ||
+                (isWeb && isHTMLElement(field._f.ref) && !isHTMLElement(ref)) ||
+                (isRadioOrCheckbox &&
+                    Array.isArray(field._f.refs) &&
+                    compact(field._f.refs).find((option) => option === ref))) {
                 return;
             }
             field = {
@@ -1409,26 +1415,12 @@ function useForm({ mode = VALIDATION_MODE.onSubmit, reValidateMode = VALIDATION_
                         ], ref: { type: ref.type, name } }) : Object.assign(Object.assign({}, field._f), { ref }),
             };
             set(fieldsRef.current, name, field);
-            const defaultValue = updateValueAndGetDefault(name);
+            const defaultValue = updateValidAndValue(name, options, true);
             if (isRadioOrCheckbox && Array.isArray(defaultValue)
                 ? !deepEqual(get(fieldsRef.current, name)._f.value, defaultValue)
                 : isUndefined(get(fieldsRef.current, name)._f.value)) {
                 get(fieldsRef.current, name)._f.value = getFieldValue(get(fieldsRef.current, name));
             }
-            if (options) {
-                if (!validationMode.isOnSubmit &&
-                    field &&
-                    readFormStateRef.current.isValid) {
-                    validateField(field, isValidateAllFieldCriteria).then((error) => {
-                        isEmptyObject(error)
-                            ? set(validFieldsRef.current, name, true)
-                            : unset(validFieldsRef.current, name);
-                        formStateRef.current.isValid &&
-                            !isEmptyObject(error) &&
-                            setFormState(Object.assign(Object.assign({}, formStateRef.current), { isValid: getIsValid() }));
-                    });
-                }
-            }
         }
     };
     const register = React.useCallback((name, options) => {
@@ -1440,7 +1432,7 @@ function useForm({ mode = VALIDATION_MODE.onSubmit, reValidateMode = VALIDATION_
         });
         options && set(fieldsWithValidationRef.current, name, true);
         fieldsNamesRef.current.add(name);
-        isInitialRegister && updateValueAndGetDefault(name);
+        isInitialRegister && updateValidAndValue(name, options);
         return isWindowUndefined
             ? { name: name }
             : {
@@ -1615,6 +1607,8 @@ function useForm({ mode = VALIDATION_MODE.onSubmit, reValidateMode = VALIDATION_
 function useWatch(props) {
     const { control, name, defaultValue } = props || {};
     const methods = useFormContext();
+    const nameRef = React.useRef(name);
+    nameRef.current = name;
     const { watchInternal, watchSubjectRef } = control || methods.control;
     const [value, updateValue] = React.useState(isUndefined(defaultValue)
         ? watchInternal(name)
@@ -1622,14 +1616,18 @@ function useWatch(props) {
     React.useEffect(() => {
         watchInternal(name);
         const watchSubscription = watchSubjectRef.current.subscribe({
-            next: ({ name: inputName, value }) => (!name ||
+            next: ({ name: inputName, value }) => (!nameRef.current ||
                 !inputName ||
-                (Array.isArray(name) ? name : [name]).some((fieldName) => inputName &&
+                (Array.isArray(nameRef.current)
+                    ? nameRef.current
+                    : [nameRef.current]).some((fieldName) => inputName &&
                     fieldName &&
                     inputName.startsWith(fieldName))) &&
-                updateValue(isString(inputName) && name === inputName && !isUndefined(value)
+                updateValue(isString(inputName) &&
+                    nameRef.current === inputName &&
+                    !isUndefined(value)
                     ? value
-                    : watchInternal(name, defaultValue)),
+                    : watchInternal(nameRef.current, defaultValue)),
         });
         return () => watchSubscription.unsubscribe();
     }, []);