react-hook-form 7.24.1 → 7.25.2

package/dist/index.esm.mjs

@@ -40,6 +40,7 @@ var get = (obj, path, defaultValue) => {
 
 const EVENTS = {
     BLUR: 'blur',
+    FOCUS_OUT: 'focusout',
     CHANGE: 'change',
 };
 const VALIDATION_MODE = {
@@ -70,22 +71,17 @@ const useFormContext = () => React.useContext(HookFormContext);
 const FormProvider = (props) => (React.createElement(HookFormContext.Provider, { value: omit(props, 'children') }, props.children));
 
 var getProxyFormState = (formState, _proxyFormState, localProxyFormState, isRoot = true) => {
-    function createGetter(prop) {
-        return () => {
-            if (prop in formState) {
-                if (_proxyFormState[prop] !== VALIDATION_MODE.all) {
-                    _proxyFormState[prop] = !isRoot || VALIDATION_MODE.all;
-                }
-                localProxyFormState && (localProxyFormState[prop] = true);
-                return formState[prop];
-            }
-            return undefined;
-        };
-    }
     const result = {};
     for (const key in formState) {
         Object.defineProperty(result, key, {
-            get: createGetter(key),
+            get: () => {
+                const _key = key;
+                if (_proxyFormState[_key] !== VALIDATION_MODE.all) {
+                    _proxyFormState[_key] = !isRoot || VALIDATION_MODE.all;
+                }
+                localProxyFormState && (localProxyFormState[_key] = true);
+                return formState[_key];
+            },
         });
     }
     return result;
@@ -242,11 +238,11 @@ function useController(props) {
         updateMounted(name, true);
         return () => {
             const _shouldUnregisterField = control._options.shouldUnregister || shouldUnregister;
-            isArrayField
+            (isArrayField
                 ? _shouldUnregisterField && !control._stateFlags.action
-                : _shouldUnregisterField
-                    ? control.unregister(name)
-                    : updateMounted(name, false);
+                : _shouldUnregisterField)
+                ? control.unregister(name)
+                : updateMounted(name, false);
         };
     }, [name, control, isArrayField, shouldUnregister]);
     return {
@@ -280,15 +276,10 @@ function useController(props) {
                         reportValidity: () => elm.reportValidity(),
                     };
                 }
-            }, [name, control]),
+            }, [name, control._fields]),
         },
         formState,
-        fieldState: {
-            invalid: !!get(formState.errors, name),
-            isDirty: get(formState.dirtyFields, name),
-            isTouched: get(formState.touchedFields, name),
-            error: get(formState.errors, name),
-        },
+        fieldState: control.getFieldState(name, formState),
     };
 }
 
@@ -465,89 +456,89 @@ const useFieldArray = (props) => {
     });
     const updateValues = React.useCallback((updatedFieldArrayValues) => {
         _actioned.current = true;
-        set(control._formValues, name, updatedFieldArrayValues);
+        control._updateFieldArray(name, updatedFieldArrayValues);
     }, [control, name]);
     const append$1 = (value, options) => {
         const appendValue = convertToArrayPayload(cloneObject(value));
         const updatedFieldArrayValues = append(control._getFieldArray(name), appendValue);
         control._names.focus = getFocusFieldName(name, updatedFieldArrayValues.length - 1, options);
         ids.current = append(ids.current, appendValue.map(generateId));
-        setFields(updatedFieldArrayValues);
         updateValues(updatedFieldArrayValues);
-        control._updateFieldArray(name, append, {
+        setFields(updatedFieldArrayValues);
+        control._updateFieldArray(name, updatedFieldArrayValues, append, {
             argA: fillEmptyArray(value),
-        }, updatedFieldArrayValues);
+        });
     };
     const prepend$1 = (value, options) => {
         const prependValue = convertToArrayPayload(cloneObject(value));
         const updatedFieldArrayValues = prepend(control._getFieldArray(name), prependValue);
         control._names.focus = getFocusFieldName(name, 0, options);
         ids.current = prepend(ids.current, prependValue.map(generateId));
-        setFields(updatedFieldArrayValues);
         updateValues(updatedFieldArrayValues);
-        control._updateFieldArray(name, prepend, {
+        setFields(updatedFieldArrayValues);
+        control._updateFieldArray(name, updatedFieldArrayValues, prepend, {
             argA: fillEmptyArray(value),
-        }, updatedFieldArrayValues);
+        });
     };
     const remove = (index) => {
         const updatedFieldArrayValues = removeArrayAt(control._getFieldArray(name), index);
         ids.current = removeArrayAt(ids.current, index);
-        setFields(updatedFieldArrayValues);
         updateValues(updatedFieldArrayValues);
-        control._updateFieldArray(name, removeArrayAt, {
+        setFields(updatedFieldArrayValues);
+        control._updateFieldArray(name, updatedFieldArrayValues, removeArrayAt, {
             argA: index,
-        }, updatedFieldArrayValues);
+        });
     };
     const insert$1 = (index, value, options) => {
         const insertValue = convertToArrayPayload(cloneObject(value));
         const updatedFieldArrayValues = insert(control._getFieldArray(name), index, insertValue);
-        updateValues(updatedFieldArrayValues);
         control._names.focus = getFocusFieldName(name, index, options);
         ids.current = insert(ids.current, index, insertValue.map(generateId));
+        updateValues(updatedFieldArrayValues);
         setFields(updatedFieldArrayValues);
-        control._updateFieldArray(name, insert, {
+        control._updateFieldArray(name, updatedFieldArrayValues, insert, {
             argA: index,
             argB: fillEmptyArray(value),
-        }, updatedFieldArrayValues);
+        });
     };
     const swap = (indexA, indexB) => {
         const updatedFieldArrayValues = control._getFieldArray(name);
         swapArrayAt(updatedFieldArrayValues, indexA, indexB);
         swapArrayAt(ids.current, indexA, indexB);
-        setFields(updatedFieldArrayValues);
         updateValues(updatedFieldArrayValues);
-        control._updateFieldArray(name, swapArrayAt, {
+        setFields(updatedFieldArrayValues);
+        control._updateFieldArray(name, updatedFieldArrayValues, swapArrayAt, {
             argA: indexA,
             argB: indexB,
-        }, updatedFieldArrayValues, false);
+        }, false);
     };
     const move = (from, to) => {
         const updatedFieldArrayValues = control._getFieldArray(name);
         moveArrayAt(updatedFieldArrayValues, from, to);
         moveArrayAt(ids.current, from, to);
-        setFields(updatedFieldArrayValues);
         updateValues(updatedFieldArrayValues);
-        control._updateFieldArray(name, moveArrayAt, {
+        setFields(updatedFieldArrayValues);
+        control._updateFieldArray(name, updatedFieldArrayValues, moveArrayAt, {
             argA: from,
             argB: to,
-        }, updatedFieldArrayValues, false);
+        }, false);
     };
     const update = (index, value) => {
         const updatedFieldArrayValues = updateAt(control._getFieldArray(name), index, value);
         ids.current = [...updatedFieldArrayValues].map((item, i) => !item || i === index ? generateId() : ids.current[i]);
-        setFields([...updatedFieldArrayValues]);
         updateValues(updatedFieldArrayValues);
-        control._updateFieldArray(name, updateAt, {
+        setFields([...updatedFieldArrayValues]);
+        control._updateFieldArray(name, updatedFieldArrayValues, updateAt, {
             argA: index,
             argB: value,
-        }, updatedFieldArrayValues, true, false);
+        }, true, false);
     };
     const replace = (value) => {
         const updatedFieldArrayValues = convertToArrayPayload(value);
         ids.current = updatedFieldArrayValues.map(generateId);
         updateValues([...updatedFieldArrayValues]);
         setFields([...updatedFieldArrayValues]);
-        control._updateFieldArray(name, () => updatedFieldArrayValues, {}, [...updatedFieldArrayValues], true, false);
+        control._updateFieldArray(name, [...updatedFieldArrayValues], () => updatedFieldArrayValues, {}, true, false);
     };
     React.useEffect(() => {
         control._stateFlags.action = false;
@@ -573,7 +564,7 @@ const useFieldArray = (props) => {
         control._proxyFormState.isValid && control._updateValid();
     }, [fields, name, control]);
     React.useEffect(() => {
-        !get(control._formValues, name) && set(control._formValues, name, []);
+        !get(control._formValues, name) && control._updateFieldArray(name);
         return () => {
             (control._options.shouldUnregister || shouldUnregister) &&
                 control.unregister(name);
@@ -1143,33 +1134,38 @@ function createFormControl(props = {}) {
         }
         return isValid;
     };
-    const _updateFieldArray = (name, method, args, values = [], shouldSetValues = true, shouldSetFields = true) => {
-        _stateFlags.action = true;
-        if (shouldSetFields && Array.isArray(get(_fields, name))) {
-            const fieldValues = method(get(_fields, name), args.argA, args.argB);
-            shouldSetValues && set(_fields, name, fieldValues);
-        }
-        if (_proxyFormState.errors &&
-            shouldSetFields &&
-            Array.isArray(get(_formState.errors, name))) {
-            const errors = method(get(_formState.errors, name), args.argA, args.argB);
-            shouldSetValues && set(_formState.errors, name, errors);
-            unsetEmptyArray(_formState.errors, name);
-        }
-        if (_proxyFormState.touchedFields &&
-            Array.isArray(get(_formState.touchedFields, name))) {
-            const touchedFields = method(get(_formState.touchedFields, name), args.argA, args.argB);
-            shouldSetValues && set(_formState.touchedFields, name, touchedFields);
+    const _updateFieldArray = (name, values = [], method, args, shouldSetValues = true, shouldUpdateFieldsAndErrors = true) => {
+        if (args && method) {
+            _stateFlags.action = true;
+            if (shouldUpdateFieldsAndErrors && Array.isArray(get(_fields, name))) {
+                const fieldValues = method(get(_fields, name), args.argA, args.argB);
+                shouldSetValues && set(_fields, name, fieldValues);
+            }
+            if (_proxyFormState.errors &&
+                shouldUpdateFieldsAndErrors &&
+                Array.isArray(get(_formState.errors, name))) {
+                const errors = method(get(_formState.errors, name), args.argA, args.argB);
+                shouldSetValues && set(_formState.errors, name, errors);
+                unsetEmptyArray(_formState.errors, name);
+            }
+            if (_proxyFormState.touchedFields &&
+                Array.isArray(get(_formState.touchedFields, name))) {
+                const touchedFields = method(get(_formState.touchedFields, name), args.argA, args.argB);
+                shouldSetValues && set(_formState.touchedFields, name, touchedFields);
+            }
+            if (_proxyFormState.dirtyFields) {
+                _formState.dirtyFields = getDirtyFields(_defaultValues, _formValues);
+            }
+            _subjects.state.next({
+                isDirty: _getDirty(name, values),
+                dirtyFields: _formState.dirtyFields,
+                errors: _formState.errors,
+                isValid: _formState.isValid,
+            });
         }
-        if (_proxyFormState.dirtyFields) {
-            _formState.dirtyFields = getDirtyFields(_defaultValues, _formValues);
+        else {
+            set(_formValues, name, values);
         }
-        _subjects.state.next({
-            isDirty: _getDirty(name, values),
-            dirtyFields: _formState.dirtyFields,
-            errors: _formState.errors,
-            isValid: _formState.isValid,
-        });
     };
     const updateErrors = (name, error) => (set(_formState.errors, name, error),
         _subjects.state.next({
@@ -1348,7 +1344,10 @@ function createFormControl(props = {}) {
                         fieldReference.refs.forEach((radioRef) => (radioRef.checked = radioRef.value === fieldValue));
                     }
                 }
-                else if (!isFileInput(fieldReference.ref)) {
+                else if (isFileInput(fieldReference.ref)) {
+                    fieldReference.ref.value = '';
+                }
+                else {
                     fieldReference.ref.value = fieldValue;
                     if (!fieldReference.ref.type) {
                         _subjects.watch.next({
@@ -1415,7 +1414,7 @@ function createFormControl(props = {}) {
             const fieldValue = target.type
                 ? getFieldValue(field._f)
                 : getEventValue(event);
-            const isBlurEvent = event.type === EVENTS.BLUR;
+            const isBlurEvent = event.type === EVENTS.BLUR || event.type === EVENTS.FOCUS_OUT;
             const shouldSkipValidation = (!hasValidation(field._f) &&
                 !_options.resolver &&
                 !get(_formState.errors, name) &&
@@ -1442,10 +1441,9 @@ function createFormControl(props = {}) {
             }
             !isBlurEvent && watched && _subjects.state.next({});
             validateFields[name] = validateFields[name] ? +1 : 1;
-            _proxyFormState.isValidating &&
-                _subjects.state.next({
-                    isValidating: true,
-                });
+            _subjects.state.next({
+                isValidating: true,
+            });
             if (_options.resolver) {
                 const { errors } = await _executeSchema([name]);
                 const previousErrorLookupResult = schemaErrorLookup(_formState.errors, _fields, name);
@@ -1503,10 +1501,10 @@ function createFormControl(props = {}) {
                 ? get(values, fieldNames)
                 : fieldNames.map((name) => get(values, name));
     };
-    const _getFieldState = (name, formState) => ({
+    const getFieldState = (name, formState) => ({
         invalid: !!get((formState || _formState).errors, name),
-        isDirty: get((formState || _formState).dirtyFields, name),
-        isTouched: get((formState || _formState).touchedFields, name),
+        isDirty: !!get((formState || _formState).dirtyFields, name),
+        isTouched: !!get((formState || _formState).touchedFields, name),
         error: get((formState || _formState).errors, name),
     });
     const clearErrors = (name) => {
@@ -1773,6 +1771,7 @@ function createFormControl(props = {}) {
         control: {
             register,
             unregister,
+            getFieldState,
             _executeSchema,
             _getWatch,
             _getDirty,
@@ -1785,15 +1784,9 @@ function createFormControl(props = {}) {
             get _fields() {
                 return _fields;
             },
-            set _fields(value) {
-                _fields = value;
-            },
             get _formValues() {
                 return _formValues;
             },
-            set _formValues(value) {
-                _formValues = value;
-            },
             get _stateFlags() {
                 return _stateFlags;
             },
@@ -1803,9 +1796,6 @@ function createFormControl(props = {}) {
             get _defaultValues() {
                 return _defaultValues;
             },
-            set _defaultValues(value) {
-                _defaultValues = value;
-            },
             get _names() {
                 return _names;
             },
@@ -1837,7 +1827,7 @@ function createFormControl(props = {}) {
         unregister,
         setError,
         setFocus,
-        _getFieldState,
+        getFieldState,
     };
 }