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

package/dist/index.esm.mjs

@@ -1236,10 +1236,10 @@ var getValueAndMessage = (validationData) => isObject(validationData) && !isRege
         message: '',
     };
 
-var validateField = async (field, disabledFieldNames, formValues, validateAllFieldCriteria, shouldUseNativeValidation, isFieldArray) => {
+var validateField = async (field, skippedFieldNames, formValues, validateAllFieldCriteria, shouldUseNativeValidation, isFieldArray) => {
     const { ref, refs, required, maxLength, minLength, min, max, pattern, validate, name, valueAsNumber, mount, } = field._f;
     const inputValue = get(formValues, name);
-    if (!mount || disabledFieldNames.has(name)) {
+    if (!mount || skippedFieldNames.has(name)) {
         return {};
     }
     const inputRef = refs ? refs[0] : ref;
@@ -1428,6 +1428,7 @@ const defaultOptions = {
     mode: VALIDATION_MODE.onSubmit,
     reValidateMode: VALIDATION_MODE.onChange,
     shouldFocusError: true,
+    shouldSkipReadOnlyValidation: false,
 };
 function createFormControl(props = {}) {
     let _options = {
@@ -1472,6 +1473,7 @@ function createFormControl(props = {}) {
     let _names = {
         mount: new Set(),
         disabled: new Set(),
+        readonly: new Set(),
         unMount: new Set(),
         array: new Set(),
         watch: new Set(),
@@ -1739,7 +1741,12 @@ function createFormControl(props = {}) {
                     if (isPromiseFunction && _proxyFormState.validatingFields) {
                         _updateIsValidating([name], true);
                     }
-                    const fieldError = await validateField(field, _names.disabled, _formValues, shouldDisplayAllAssociatedErrors, _options.shouldUseNativeValidation && !shouldOnlyCheckValid, isFieldArrayRoot);
+                    // Combine disabled and readonly field names for validation skipping
+                    const skipValidationFields = new Set([
+                        ..._names.disabled,
+                        ..._names.readonly,
+                    ]);
+                    const fieldError = await validateField(field, skipValidationFields, _formValues, shouldDisplayAllAssociatedErrors, _options.shouldUseNativeValidation && !shouldOnlyCheckValid, isFieldArrayRoot);
                     if (isPromiseFunction && _proxyFormState.validatingFields) {
                         _updateIsValidating([name]);
                     }
@@ -1945,6 +1952,36 @@ function createFormControl(props = {}) {
                 }
                 return;
             }
+            // Check if field is readonly and should skip validation (only when flag is enabled)
+            if (_options.shouldSkipReadOnlyValidation && target && target.readOnly) {
+                // Add to readonly fields set for validation skipping
+                _names.readonly.add(name);
+                // For readonly fields, we still want to update the form values
+                // but skip validation (similar to disabled fields behavior)
+                const fieldValue = target.type
+                    ? getFieldValue(field._f)
+                    : getEventValue(event);
+                const isBlurEvent = event.type === EVENTS.BLUR || event.type === EVENTS.FOCUS_OUT;
+                const isFocusEvent = event.type === EVENTS.FOCUS || event.type === EVENTS.FOCUS_IN;
+                const watched = isWatched(name, _names, isBlurEvent || isFocusEvent);
+                // Update form values but skip validation and error handling
+                set(_formValues, name, fieldValue);
+                // Update touch and dirty state
+                const fieldState = updateTouchAndDirty(name, fieldValue, isBlurEvent, isFocusEvent, !isBlurEvent);
+                const shouldRender = !isEmptyObject(fieldState) || watched;
+                !isBlurEvent &&
+                    _subjects.state.next({
+                        name,
+                        type: event.type,
+                        values: cloneObject(_formValues),
+                    });
+                return (shouldRender &&
+                    _subjects.state.next({ name, ...(watched ? {} : fieldState) }));
+            }
+            else if (_options.shouldSkipReadOnlyValidation) {
+                // Remove from readonly fields set if not readonly anymore (only when flag is enabled)
+                _names.readonly.delete(name);
+            }
             let error;
             let isValid;
             const fieldValue = target.type
@@ -2004,7 +2041,12 @@ function createFormControl(props = {}) {
             }
             else {
                 _updateIsValidating([name], true);
-                error = (await validateField(field, _names.disabled, _formValues, shouldDisplayAllAssociatedErrors, _options.shouldUseNativeValidation))[name];
+                // Combine disabled and readonly field names for validation skipping
+                const skipValidationFields = new Set([
+                    ..._names.disabled,
+                    ..._names.readonly,
+                ]);
+                error = (await validateField(field, skipValidationFields, _formValues, shouldDisplayAllAssociatedErrors, _options.shouldUseNativeValidation, false))[name];
                 _updateIsValidating([name]);
                 _updateIsFieldValueUpdated(fieldValue);
                 if (isFieldValueUpdated) {
@@ -2255,6 +2297,13 @@ function createFormControl(props = {}) {
                         },
                     });
                     updateValidAndValue(name, false, undefined, fieldRef);
+                    // Check if field is readonly and should skip validation (only when flag is enabled)
+                    if (_options.shouldSkipReadOnlyValidation &&
+                        fieldRef &&
+                        'readOnly' in fieldRef &&
+                        fieldRef.readOnly) {
+                        _names.readonly.add(name);
+                    }
                 }
                 else {
                     field = get(_fields, name, {});
@@ -2455,6 +2504,7 @@ function createFormControl(props = {}) {
             unMount: new Set(),
             array: new Set(),
             disabled: new Set(),
+            readonly: new Set(),
             watch: new Set(),
             watchAll: false,
             focus: '',
@@ -2554,6 +2604,28 @@ function createFormControl(props = {}) {
             });
         }
     };
+    const _updateReadonlyFieldTracking = () => {
+        // Re-evaluate all registered fields and update readonly tracking
+        // based on current shouldSkipReadOnlyValidation flag and field readonly state
+        Object.keys(_fields).forEach((fieldName) => {
+            const field = get(_fields, fieldName);
+            if (field && field._f) {
+                // Get the actual DOM element reference
+                const fieldRef = field._f.refs ? field._f.refs[0] : field._f.ref;
+                if (fieldRef && 'readOnly' in fieldRef) {
+                    const isFieldReadonly = Boolean(fieldRef.readOnly);
+                    const shouldTrackAsReadonly = _options.shouldSkipReadOnlyValidation && isFieldReadonly;
+                    // Update readonly tracking set
+                    if (shouldTrackAsReadonly) {
+                        _names.readonly.add(fieldName);
+                    }
+                    else {
+                        _names.readonly.delete(fieldName);
+                    }
+                }
+            }
+        });
+    };
     const setMetadata = (metadata) => {
         let _metadata;
         if (!metadata) {
@@ -2598,6 +2670,7 @@ function createFormControl(props = {}) {
             _removeUnmounted,
             _disableForm,
             _updateIsLoading,
+            _updateReadonlyFieldTracking,
             _subjects,
             _proxyFormState,
             get _fields() {
@@ -3060,6 +3133,11 @@ function useForm(props = {}) {
         return sub;
     }, [control]);
     React.useEffect(() => control._disableForm(props.disabled), [control, props.disabled]);
+    // Handle shouldSkipReadOnlyValidation flag changes
+    React.useEffect(() => {
+        // Re-evaluate readonly field tracking when the flag changes
+        control._updateReadonlyFieldTracking();
+    }, [control, props.shouldSkipReadOnlyValidation]);
     React.useEffect(() => {
         control._updateIsLoading(props.isLoading);
     }, [control, props.isLoading]);