feat: add option forceUpdateOnStatusChange to useForm()

Author: jalik

src/useForm.ts

@@ -343,6 +343,10 @@ export type UseFormOptions<V extends Values, E, R> = {
    * Disables the form (fields and buttons).
    */
   disabled?: boolean;
+  /**
+   * Update the form when it is modified or touched (happens only at the form level).
+   */
+  forceUpdateOnStatusChange?: boolean;
   /**
    * Sets the initial errors.
    */
@@ -483,6 +487,7 @@ function useForm<V extends Values, E = Error, R = any> (options: UseFormOptions<
     // todo v6: change to false by default
     disableSubmitIfNotModified = true,
     disableSubmitIfNotValid = false,
+    forceUpdateOnStatusChange = false,
     initialErrors,
     initialModified,
     initialTouched,
@@ -555,6 +560,7 @@ function useForm<V extends Values, E = Error, R = any> (options: UseFormOptions<
 
   // Handle form status.
   const formStatus = useFormStatus({
+    forceUpdateOnStatusChange,
     formState,
     mode
   })
@@ -564,6 +570,7 @@ function useForm<V extends Values, E = Error, R = any> (options: UseFormOptions<
 
   // Handle form values.
   const formValues = useFormValues<V, E, R>({
+    forceUpdateOnStatusChange,
     formErrors,
     formKeys,
     formState,
@@ -701,7 +708,9 @@ function useForm<V extends Values, E = Error, R = any> (options: UseFormOptions<
     const target = event.currentTarget ?? event.target
     const { name } = target
 
-    setTouchedField(name, true)
+    setTouchedField(name, true, {
+      forceUpdate: forceUpdateOnStatusChange
+    })
 
     if (validateOnTouch) {
       setNeedValidation([name])
@@ -716,7 +725,7 @@ function useForm<V extends Values, E = Error, R = any> (options: UseFormOptions<
         setValue(name, value, { validate: validateOnTouch })
       }
     }
-  }, [setTouchedField, validateOnTouch, trimOnBlur, setNeedValidation, getValue, setValue])
+  }, [setTouchedField, forceUpdateOnStatusChange, validateOnTouch, trimOnBlur, setNeedValidation, getValue, setValue])
 
   const handleChange = useCallback<UseFormHook<V, E, R>['handleChange']>((event, opts): void => {
     const { setValueOptions } = opts ?? {}
@@ -785,7 +794,7 @@ function useForm<V extends Values, E = Error, R = any> (options: UseFormOptions<
 
     if (props.disabled || formDisabled ||
       (state.hasError && disableSubmitIfNotValid && type === 'submit') ||
-      (!state.modified && (
+      (!state.modified && (mode === 'controlled' || forceUpdateOnStatusChange) && (
         // Disable submit button if form is not modified.
         (type === 'submit' && disableSubmitIfNotModified) ||
         // Disable reset button if form is not modified.
@@ -794,7 +803,7 @@ function useForm<V extends Values, E = Error, R = any> (options: UseFormOptions<
       result.disabled = true
     }
     return result
-  }, [formDisabled, state.hasError, state.modified, disableSubmitIfNotValid, disableSubmitIfNotModified, handleButtonClick])
+  }, [formDisabled, state.hasError, state.modified, disableSubmitIfNotValid, mode, forceUpdateOnStatusChange, disableSubmitIfNotModified])
 
   /**
    * Returns props of a field.

src/useFormStatus.ts

@@ -15,6 +15,10 @@ import {
 import { hasTrueValues } from './utils'
 
 export type UseFormStatusOptions<V extends Values, E, R> = {
+  /**
+   * Update the form when it is modified or touched (happens only at the form level).
+   */
+  forceUpdateOnStatusChange?: boolean;
   /**
    * The form state hook.
    */
@@ -142,6 +146,7 @@ export type UseFormStatusHook<V extends Values> = {
 
 function useFormStatus<V extends Values, E, R> (options: UseFormStatusOptions<V, E, R>): UseFormStatusHook<V> {
   const {
+    forceUpdateOnStatusChange,
     formState,
     mode
   } = options
@@ -161,7 +166,7 @@ function useFormStatus<V extends Values, E, R> (options: UseFormStatusOptions<V,
   // MODIFIED
 
   const clearModified = useCallback<UseFormStatusHook<V>['clearModified']>((paths, opts) => {
-    const { forceUpdate = false } = opts ?? {}
+    const { forceUpdate = forceUpdateOnStatusChange } = opts ?? {}
 
     if (paths) {
       for (let i = 0; i < paths.length; i++) {
@@ -178,7 +183,7 @@ function useFormStatus<V extends Values, E, R> (options: UseFormStatusOptions<V,
         modifiedFields: modifiedRef.current
       }))
     }
-  }, [mode, modifiedRef, setState])
+  }, [forceUpdateOnStatusChange, mode, modifiedRef, setState])
 
   const getModified = useCallback<UseFormStatusHook<V>['getModified']>(() => {
     return modifiedRef.current
@@ -192,7 +197,7 @@ function useFormStatus<V extends Values, E, R> (options: UseFormStatusOptions<V,
   }, [modifiedRef])
 
   const resetModified = useCallback<UseFormStatusHook<V>['resetModified']>((paths, opts) => {
-    const { forceUpdate = false } = opts ?? {}
+    const { forceUpdate = forceUpdateOnStatusChange } = opts ?? {}
 
     if (paths) {
       for (let i = 0; i < paths.length; i++) {
@@ -209,12 +214,12 @@ function useFormStatus<V extends Values, E, R> (options: UseFormStatusOptions<V,
         modifiedFields: modifiedRef.current
       }))
     }
-  }, [initialModified, mode, modifiedRef, setState])
+  }, [forceUpdateOnStatusChange, initialModified, mode, modifiedRef, setState])
 
   const setModified = useCallback<UseFormStatusHook<V>['setModified']>((values, opts) => {
     const {
       partial = false,
-      forceUpdate = false
+      forceUpdate = forceUpdateOnStatusChange
     } = opts ?? {}
 
     // const previousModified = clone(modifiedRef.current)
@@ -232,7 +237,7 @@ function useFormStatus<V extends Values, E, R> (options: UseFormStatusOptions<V,
         modifiedFields: nextModified
       }))
     }
-  }, [mode, modifiedRef, setState])
+  }, [forceUpdateOnStatusChange, mode, modifiedRef, setState])
 
   const setModifiedField = useCallback<UseFormStatusHook<V>['setModifiedField']>((path, value) => {
     setModified({ [path]: value }, { partial: true })
@@ -241,7 +246,7 @@ function useFormStatus<V extends Values, E, R> (options: UseFormStatusOptions<V,
   // TOUCHED
 
   const clearTouched = useCallback<UseFormStatusHook<V>['clearTouched']>((paths, opts) => {
-    const { forceUpdate = false } = opts ?? {}
+    const { forceUpdate = forceUpdateOnStatusChange } = opts ?? {}
 
     if (paths) {
       for (let i = 0; i < paths.length; i++) {
@@ -258,7 +263,7 @@ function useFormStatus<V extends Values, E, R> (options: UseFormStatusOptions<V,
         touchedFields: touchedRef.current
       }))
     }
-  }, [mode, setState, touchedRef])
+  }, [forceUpdateOnStatusChange, mode, setState, touchedRef])
 
   const getTouched = useCallback<UseFormStatusHook<V>['getTouched']>(() => {
     return touchedRef.current
@@ -272,7 +277,7 @@ function useFormStatus<V extends Values, E, R> (options: UseFormStatusOptions<V,
   }, [touchedRef])
 
   const resetTouched = useCallback<UseFormStatusHook<V>['resetTouched']>((paths, opts) => {
-    const { forceUpdate = false } = opts ?? {}
+    const { forceUpdate = forceUpdateOnStatusChange } = opts ?? {}
 
     if (paths) {
       for (let i = 0; i < paths.length; i++) {
@@ -289,12 +294,12 @@ function useFormStatus<V extends Values, E, R> (options: UseFormStatusOptions<V,
         touchedFields: touchedRef.current
       }))
     }
-  }, [initialTouched, mode, setState, touchedRef])
+  }, [forceUpdateOnStatusChange, initialTouched, mode, setState, touchedRef])
 
   const setTouched = useCallback<UseFormStatusHook<V>['setTouched']>((values, opts) => {
     const {
-      partial = false,
-      forceUpdate = false
+      forceUpdate = forceUpdateOnStatusChange,
+      partial = false
     } = opts ?? {}
 
     // const previousTouched = clone(touchedRef.current)
@@ -312,7 +317,7 @@ function useFormStatus<V extends Values, E, R> (options: UseFormStatusOptions<V,
         touchedFields: nextTouched
       }))
     }
-  }, [mode, setState, touchedRef])
+  }, [forceUpdateOnStatusChange, mode, setState, touchedRef])
 
   const setTouchedField = useCallback<UseFormStatusHook<V>['setTouchedField']>((path, value) => {
     setTouched({ [path]: value }, { partial: true })

src/useFormValues.ts

@@ -23,6 +23,10 @@ import { UseFormErrorsHook } from './useFormErrors'
 import deepExtend from '@jalik/deep-extend'
 
 export type UseFormValuesOptions<V extends Values, E, R> = {
+  /**
+   * Update the form when it is modified or touched (happens only at the form level).
+   */
+  forceUpdateOnStatusChange?: boolean;
   /**
    * The form keys hook.
    */
@@ -161,6 +165,7 @@ export type UseFormValuesHook<V extends Values> = {
 
 function useFormValues<V extends Values, E, R> (options: UseFormValuesOptions<V, E, R>): UseFormValuesHook<V> {
   const {
+    forceUpdateOnStatusChange,
     formErrors,
     formKeys,
     formState,
@@ -286,10 +291,22 @@ function useFormValues<V extends Values, E, R> (options: UseFormValuesOptions<V,
     // Update values ref.
     valuesRef.current = nextValues
 
+    if (initialize) {
+      initialValuesRef.current = clone(nextValues)
+      initializedRef.current = true
+    }
+    if (updateErrors) {
+      errorsRef.current = partial ? { ...errorsRef.current, ...nextErrors } : nextErrors
+    }
+    if (updateModified) {
+      modifiedRef.current = partial ? { ...modifiedRef.current, ...nextModified } : nextModified
+    }
+    if (updateTouched) {
+      touchedRef.current = partial ? { ...touchedRef.current } : {}
+    }
+
     // Update state.
-    if (mode === 'controlled' || forceUpdate || (initialize || !initializedRef.current) || validate ||
-      hasDefinedValues(nextErrors) ||
-      hasDefinedValues(nextModified)) {
+    if (mode === 'controlled' || forceUpdate || validate || (initialize || !initializedRef.current) || (forceUpdateOnStatusChange && hasDefinedValues(nextModified))) {
       setState((s) => {
         const nextState = {
           ...s,
@@ -300,23 +317,18 @@ function useFormValues<V extends Values, E, R> (options: UseFormValuesOptions<V,
 
         // Update initial values.
         if (initialize) {
-          initialValuesRef.current = clone(nextValues)
           nextState.initialValues = initialValuesRef.current
-          initializedRef.current = true
         }
         // Update errors.
         if (updateErrors) {
-          errorsRef.current = partial ? { ...errorsRef.current, ...nextErrors } : nextErrors
           nextState.errors = errorsRef.current
         }
         // Update modified.
         if (updateModified) {
-          modifiedRef.current = partial ? { ...modifiedRef.current, ...nextModified } : nextModified
           nextState.modifiedFields = modifiedRef.current
         }
         // Update touched.
         if (updateTouched) {
-          touchedRef.current = partial ? { ...touchedRef.current } : {}
           nextState.touchedFields = touchedRef.current
         }
         if (validate) {
@@ -353,7 +365,7 @@ function useFormValues<V extends Values, E, R> (options: UseFormValuesOptions<V,
         watchers.current.emit(inputChangeEvent(path), status)
       }
     }
-  }, [errorsRef, getInitialValue, initialValuesRef, initializedRef, isTouched, mode, modifiedRef, options.nullify, replaceKeys, setState, touchedRef, valuesRef, watchers])
+  }, [errorsRef, forceUpdateOnStatusChange, getInitialValue, initialValuesRef, initializedRef, isTouched, mode, modifiedRef, options.nullify, replaceKeys, setState, touchedRef, valuesRef, watchers])
 
   const setValue = useCallback<UseFormValuesHook<V>['setValue']>((path, value, opts) => {
     const currentValue = getValue(path)
@@ -418,11 +430,8 @@ function useFormValues<V extends Values, E, R> (options: UseFormValuesOptions<V,
       }
     }
     initialValuesRef.current = nextInitialValues
-    clearErrors(paths, { forceUpdate: false })
-    clearModified(paths, { forceUpdate: false })
-    clearTouched(paths, { forceUpdate: false })
     clearValues(paths, { ...opts })
-  }, [clearErrors, clearModified, clearTouched, clearValues, initialValuesRef])
+  }, [clearValues, initialValuesRef])
 
   const resetValues = useCallback<UseFormValuesHook<V>['resetValues']>((paths, opts) => {
     let nextValues: PathsOrValues<V>

test/useForm.test.ts

@@ -556,8 +556,8 @@ describe('useForm()', () => {
           result.current.reset(['password'])
         })
 
-        expect(result.current.modifiedFields.username).toBe(true)
-        expect(result.current.modifiedFields.password).toBeFalsy()
+        expect(result.current.isModified('username')).toBe(true)
+        expect(result.current.isModified('password')).toBeFalsy()
         expect(result.current.values.username).toBe('test')
         expect(result.current.values.password).toBe(initialValues.password)
       })

test/useForm/clearErrors.test.ts

@@ -21,7 +21,7 @@ function test (mode: FormMode) {
       expect(hook.result.current.getError('a')).toBe('invalid')
       expect(hook.result.current.getError('b')).toBe('invalid')
       act(() => hook.result.current.clearErrors())
-      expect(hook.result.current.errors).toStrictEqual({})
+      expect(hook.result.current.getErrors()).toStrictEqual({})
     })
   })
 

test/useForm/options/disableSubmitIfNotModified.test.ts

@@ -17,7 +17,8 @@ function tests (mode: FormMode) {
         const hook = renderHook(() => useForm({
           mode,
           initialValues,
-          disableSubmitIfNotModified: true
+          disableSubmitIfNotModified: true,
+          forceUpdateOnStatusChange: true
         }))
         expect(hook.result.current.isModified()).toBe(false)
         expect(hook.result.current.getButtonProps({ type: 'submit' }).disabled).toBe(true)