@bombillazo/rhf-plus 7.62.0-plus.4 → 7.62.0-plus.6

package/dist/index.esm.mjs

@@ -270,6 +270,8 @@ function useFormState(props) {
     const [formState, updateFormState] = React.useState(control._formState);
     const _localProxyFormState = React.useRef({
         isDirty: false,
+        isDirtySinceSubmit: false,
+        hasBeenSubmitted: false,
         isLoading: false,
         dirtyFields: false,
         touchedFields: false,
@@ -1436,6 +1438,8 @@ function createFormControl(props = {}) {
     let _formState = {
         submitCount: 0,
         isDirty: false,
+        isDirtySinceSubmit: false,
+        hasBeenSubmitted: false,
         isReady: false,
         isLoading: _internalLoading,
         isValidating: false,
@@ -1476,6 +1480,8 @@ function createFormControl(props = {}) {
     let timer = 0;
     const _proxyFormState = {
         isDirty: false,
+        isDirtySinceSubmit: false,
+        hasBeenSubmitted: false,
         dirtyFields: false,
         validatingFields: false,
         touchedFields: false,
@@ -1493,6 +1499,8 @@ function createFormControl(props = {}) {
     };
     const shouldDisplayAllAssociatedErrors = _options.criteriaMode === VALIDATION_MODE.all;
     const id = createId(props.id);
+    // Track if form was ever submitted (persists through resets)
+    let _hasBeenSubmitted = false;
     const debounce = (callback) => (wait) => {
         clearTimeout(timer);
         timer = setTimeout(callback, wait);
@@ -1616,6 +1624,20 @@ function createFormControl(props = {}) {
                             _proxySubscribeFormState.dirtyFields) &&
                             isPreviousDirty !== !isCurrentFieldPristine);
             }
+            // Set isDirtySinceSubmit to true if form was ever submitted and a field value is being changed
+            // For change events (not blur/focus), always set if form was ever submitted
+            // shouldDirty is true for onChange events, false for blur
+            if ((_formState.isSubmitted || _hasBeenSubmitted) &&
+                !_formState.isDirtySinceSubmit &&
+                !isBlurEvent &&
+                !isFocusEvent &&
+                shouldDirty) {
+                _formState.isDirtySinceSubmit = output.isDirtySinceSubmit = true;
+                shouldUpdateField =
+                    shouldUpdateField ||
+                        !!(_proxyFormState.isDirtySinceSubmit ||
+                            _proxySubscribeFormState.isDirtySinceSubmit);
+            }
             if (isBlurEvent) {
                 const isPreviousFieldTouched = get(_formState.touchedFields, name);
                 if (!isPreviousFieldTouched) {
@@ -1811,9 +1833,15 @@ function createFormControl(props = {}) {
                 }
             }
         }
-        (options.shouldDirty || options.shouldTouch) &&
+        const isSubmittedAndDirty = (_formState.isSubmitted || _hasBeenSubmitted) &&
+            !deepEqual(get(_defaultValues, name), fieldValue);
+        // If the form was submitted, track value changes for isDirtySinceSubmit
+        // only when the value actually differs from the default value,
+        // even if shouldDirty is not explicitly set
+        const shouldTrackChange = options.shouldDirty || options.shouldTouch || isSubmittedAndDirty;
+        shouldTrackChange &&
             updateTouchAndDirty(name, fieldValue, options.shouldTouch, false, // isFocusEvent - not applicable for setValue
-            options.shouldDirty, true);
+            options.shouldDirty || isSubmittedAndDirty, true);
         options.shouldValidate && trigger(name);
     };
     const setValues = (name, value, options) => {
@@ -1845,12 +1873,25 @@ function createFormControl(props = {}) {
             if ((_proxyFormState.isDirty ||
                 _proxyFormState.dirtyFields ||
                 _proxySubscribeFormState.isDirty ||
-                _proxySubscribeFormState.dirtyFields) &&
+                _proxySubscribeFormState.dirtyFields ||
+                _proxyFormState.isDirtySinceSubmit ||
+                _proxySubscribeFormState.isDirtySinceSubmit) &&
                 options.shouldDirty) {
                 _subjects.state.next({
                     name,
                     dirtyFields: getDirtyFields(_defaultValues, _formValues),
                     isDirty: _getDirty(name, cloneValue),
+                    ...((_formState.isSubmitted || _hasBeenSubmitted) &&
+                        !_formState.isDirtySinceSubmit
+                        ? { isDirtySinceSubmit: true }
+                        : {}),
+                });
+            }
+            else if ((_formState.isSubmitted || _hasBeenSubmitted) &&
+                !_formState.isDirtySinceSubmit) {
+                _subjects.state.next({
+                    name,
+                    isDirtySinceSubmit: true,
                 });
             }
         }
@@ -1864,6 +1905,14 @@ function createFormControl(props = {}) {
             name: _state.mount ? name : undefined,
             values: cloneObject(_formValues),
         });
+        // Trigger validation when shouldValidate is true
+        // This ensures validation happens for all cases including:
+        // - Field arrays
+        // - Empty arrays
+        // - Nested fields with array values
+        if (options.shouldValidate) {
+            trigger(name);
+        }
     };
     const onChange = async (event) => {
         _state.mount = true;
@@ -1919,7 +1968,7 @@ function createFormControl(props = {}) {
             else if (field._f.onChange) {
                 field._f.onChange(event);
             }
-            const fieldState = updateTouchAndDirty(name, fieldValue, isBlurEvent, isFocusEvent);
+            const fieldState = updateTouchAndDirty(name, fieldValue, isBlurEvent, isFocusEvent, !isBlurEvent);
             const shouldRender = !isEmptyObject(fieldState) || watched;
             !isBlurEvent &&
                 _subjects.state.next({
@@ -2303,11 +2352,14 @@ function createFormControl(props = {}) {
             _focusError();
             setTimeout(_focusError);
         }
+        _hasBeenSubmitted = true; // Mark that form was submitted at least once
         _subjects.state.next({
             isSubmitted: true,
             isSubmitting: false,
             isSubmitSuccessful: isEmptyObject(_formState.errors) && !onValidError,
             submitCount: _formState.submitCount + 1,
+            isDirtySinceSubmit: false,
+            hasBeenSubmitted: _hasBeenSubmitted,
             errors: _formState.errors,
         });
         if (onValidError) {
@@ -2370,7 +2422,7 @@ function createFormControl(props = {}) {
                             if (isHTMLElement(fieldReference)) {
                                 const form = fieldReference.closest('form');
                                 if (form) {
-                                    form.reset();
+                                    HTMLFormElement.prototype.reset.call(form);
                                     break;
                                 }
                             }
@@ -2422,6 +2474,8 @@ function createFormControl(props = {}) {
                     ? _formState.isDirty
                     : !!(keepStateOptions.keepDefaultValues &&
                         !deepEqual(formValues, _defaultValues)),
+            isDirtySinceSubmit: false,
+            hasBeenSubmitted: _hasBeenSubmitted, // Persist the hasBeenSubmitted flag
             isSubmitted: keepStateOptions.keepIsSubmitted
                 ? _formState.isSubmitted
                 : false,
@@ -2947,6 +3001,8 @@ function useForm(props = {}) {
     const _values = React.useRef(undefined);
     const [formState, updateFormState] = React.useState({
         isDirty: false,
+        isDirtySinceSubmit: false,
+        hasBeenSubmitted: false,
         isValidating: false,
         isLoading: props.isLoading || isFunction(props.defaultValues),
         isSubmitted: false,